<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Limitless - Responsive Web Application Kit by Eugene Kopyov</title>

	<!-- Global stylesheets -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
	<link href="../../../../global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/bootstrap_limitless.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/layout.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/components.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/colors.min.css" rel="stylesheet" type="text/css">
	<!-- /global stylesheets -->

	<!-- Core JS files -->
	<script src="../../../../global_assets/js/main/jquery.min.js"></script>
	<script src="../../../../global_assets/js/main/bootstrap.bundle.min.js"></script>
	<script src="../../../../global_assets/js/plugins/loaders/blockui.min.js"></script>
	<!-- /core JS files -->

	<!-- Theme JS files -->
	<script src="../../../../global_assets/js/plugins/forms/styling/uniform.min.js"></script>
	<script src="../../../../global_assets/js/plugins/forms/styling/switchery.min.js"></script>
	<script src="../../../../global_assets/js/plugins/forms/selects/select2.min.js"></script>
	<script src="../../../../global_assets/js/plugins/ui/slinky.min.js"></script>

	<script src="assets/js/app.js"></script>
	<script src="../../../../global_assets/js/demo_pages/navigation_horizontal_mega.js"></script>
	<!-- /theme JS files -->

</head>

<body class="sidebar-xs">

	<!-- Main navbar -->
	<div class="navbar navbar-expand-md navbar-dark">
		<div class="navbar-brand">
			<a href="index.html" class="d-inline-block">
				<img src="../../../../global_assets/images/logo_light.png" alt="">
			</a>
		</div>

		<div class="d-md-none">
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-mobile">
				<i class="icon-tree5"></i>
			</button>
			<button class="navbar-toggler sidebar-mobile-main-toggle" type="button">
				<i class="icon-paragraph-justify3"></i>
			</button>
		</div>

		<div class="collapse navbar-collapse" id="navbar-mobile">
			<ul class="navbar-nav">
				<li class="nav-item">
					<a href="#" class="navbar-nav-link sidebar-control sidebar-main-toggle d-none d-md-block">
						<i class="icon-paragraph-justify3"></i>
					</a>
				</li>

				<li class="nav-item dropdown">
					<a href="#" class="navbar-nav-link dropdown-toggle caret-0" data-toggle="dropdown">
						<i class="icon-git-compare"></i>
						<span class="d-md-none ml-2">Git updates</span>
						<span class="badge badge-pill bg-warning-400 ml-auto ml-md-0">9</span>
					</a>

					<div class="dropdown-menu dropdown-content wmin-md-350">
						<div class="dropdown-content-header">
							<span class="font-weight-semibold">Git updates</span>
							<a href="#" class="text-default"><i class="icon-sync"></i></a>
						</div>

						<div class="dropdown-content-body dropdown-scrollable">
							<ul class="media-list">
								<li class="media">
									<div class="mr-3">
										<a href="#" class="btn bg-transparent border-primary text-primary rounded-round border-2 btn-icon"><i class="icon-git-pull-request"></i></a>
									</div>

									<div class="media-body">
										Drop the IE <a href="#">specific hacks</a> for temporal inputs
										<div class="text-muted font-size-sm">4 minutes ago</div>
									</div>
								</li>

								<li class="media">
									<div class="mr-3">
										<a href="#" class="btn bg-transparent border-warning text-warning rounded-round border-2 btn-icon"><i class="icon-git-commit"></i></a>
									</div>
									
									<div class="media-body">
										Add full font overrides for popovers and tooltips
										<div class="text-muted font-size-sm">36 minutes ago</div>
									</div>
								</li>

								<li class="media">
									<div class="mr-3">
										<a href="#" class="btn bg-transparent border-info text-info rounded-round border-2 btn-icon"><i class="icon-git-branch"></i></a>
									</div>
									
									<div class="media-body">
										<a href="#">Chris Arney</a> created a new <span class="font-weight-semibold">Design</span> branch
										<div class="text-muted font-size-sm">2 hours ago</div>
									</div>
								</li>

								<li class="media">
									<div class="mr-3">
										<a href="#" class="btn bg-transparent border-success text-success rounded-round border-2 btn-icon"><i class="icon-git-merge"></i></a>
									</div>
									
									<div class="media-body">
										<a href="#">Eugene Kopyov</a> merged <span class="font-weight-semibold">Master</span> and <span class="font-weight-semibold">Dev</span> branches
										<div class="text-muted font-size-sm">Dec 18, 18:36</div>
									</div>
								</li>

								<li class="media">
									<div class="mr-3">
										<a href="#" class="btn bg-transparent border-primary text-primary rounded-round border-2 btn-icon"><i class="icon-git-pull-request"></i></a>
									</div>
									
									<div class="media-body">
										Have Carousel ignore keyboard events
										<div class="text-muted font-size-sm">Dec 12, 05:46</div>
									</div>
								</li>
							</ul>
						</div>

						<div class="dropdown-content-footer bg-light">
							<a href="#" class="text-grey mr-auto">All updates</a>
							<div>
								<a href="#" class="text-grey" data-popup="tooltip" title="Mark all as read"><i class="icon-radio-unchecked"></i></a>
								<a href="#" class="text-grey ml-2" data-popup="tooltip" title="Bug tracker"><i class="icon-bug2"></i></a>
							</div>
						</div>
					</div>
				</li>
			</ul>

			<span class="navbar-text ml-md-3 mr-md-auto">
				<span class="badge bg-success">Online</span>
			</span>

			<ul class="navbar-nav">
				<li class="nav-item dropdown">
					<a href="#" class="navbar-nav-link dropdown-toggle caret-0" data-toggle="dropdown">
						<i class="icon-people"></i>
						<span class="d-md-none ml-2">Users</span>
					</a>
					
					<div class="dropdown-menu dropdown-menu-right dropdown-content wmin-md-300">
						<div class="dropdown-content-header">
							<span class="font-weight-semibold">Users online</span>
							<a href="#" class="text-default"><i class="icon-search4 font-size-base"></i></a>
						</div>

						<div class="dropdown-content-body dropdown-scrollable">
							<ul class="media-list">
								<li class="media">
									<div class="mr-3">
										<img src="../../../../global_assets/images/demo/users/face18.jpg" width="36" height="36" class="rounded-circle" alt="">
									</div>
									<div class="media-body">
										<a href="#" class="media-title font-weight-semibold">Jordana Ansley</a>
										<span class="d-block text-muted font-size-sm">Lead web developer</span>
									</div>
									<div class="ml-3 align-self-center"><span class="badge badge-mark border-success"></span></div>
								</li>

								<li class="media">
									<div class="mr-3">
										<img src="../../../../global_assets/images/demo/users/face24.jpg" width="36" height="36" class="rounded-circle" alt="">
									</div>
									<div class="media-body">
										<a href="#" class="media-title font-weight-semibold">Will Brason</a>
										<span class="d-block text-muted font-size-sm">Marketing manager</span>
									</div>
									<div class="ml-3 align-self-center"><span class="badge badge-mark border-danger"></span></div>
								</li>

								<li class="media">
									<div class="mr-3">
										<img src="../../../../global_assets/images/demo/users/face17.jpg" width="36" height="36" class="rounded-circle" alt="">
									</div>
									<div class="media-body">
										<a href="#" class="media-title font-weight-semibold">Hanna Walden</a>
										<span class="d-block text-muted font-size-sm">Project manager</span>
									</div>
									<div class="ml-3 align-self-center"><span class="badge badge-mark border-success"></span></div>
								</li>

								<li class="media">
									<div class="mr-3">
										<img src="../../../../global_assets/images/demo/users/face19.jpg" width="36" height="36" class="rounded-circle" alt="">
									</div>
									<div class="media-body">
										<a href="#" class="media-title font-weight-semibold">Dori Laperriere</a>
										<span class="d-block text-muted font-size-sm">Business developer</span>
									</div>
									<div class="ml-3 align-self-center"><span class="badge badge-mark border-warning-300"></span></div>
								</li>

								<li class="media">
									<div class="mr-3">
										<img src="../../../../global_assets/images/demo/users/face16.jpg" width="36" height="36" class="rounded-circle" alt="">
									</div>
									<div class="media-body">
										<a href="#" class="media-title font-weight-semibold">Vanessa Aurelius</a>
										<span class="d-block text-muted font-size-sm">UX expert</span>
									</div>
									<div class="ml-3 align-self-center"><span class="badge badge-mark border-grey-400"></span></div>
								</li>
							</ul>
						</div>

						<div class="dropdown-content-footer bg-light">
							<a href="#" class="text-grey mr-auto">All users</a>
							<a href="#" class="text-grey"><i class="icon-gear"></i></a>
						</div>
					</div>
				</li>

				<li class="nav-item dropdown">
					<a href="#" class="navbar-nav-link dropdown-toggle caret-0" data-toggle="dropdown">
						<i class="icon-bubbles4"></i>
						<span class="d-md-none ml-2">Messages</span>
						<span class="badge badge-pill bg-warning-400 ml-auto ml-md-0">2</span>
					</a>
					
					<div class="dropdown-menu dropdown-menu-right dropdown-content wmin-md-350">
						<div class="dropdown-content-header">
							<span class="font-weight-semibold">Messages</span>
							<a href="#" class="text-default"><i class="icon-compose"></i></a>
						</div>

						<div class="dropdown-content-body dropdown-scrollable">
							<ul class="media-list">
								<li class="media">
									<div class="mr-3 position-relative">
										<img src="../../../../global_assets/images/demo/users/face10.jpg" width="36" height="36" class="rounded-circle" alt="">
									</div>

									<div class="media-body">
										<div class="media-title">
											<a href="#">
												<span class="font-weight-semibold">James Alexander</span>
												<span class="text-muted float-right font-size-sm">04:58</span>
											</a>
										</div>

										<span class="text-muted">who knows, maybe that would be the best thing for me...</span>
									</div>
								</li>

								<li class="media">
									<div class="mr-3 position-relative">
										<img src="../../../../global_assets/images/demo/users/face3.jpg" width="36" height="36" class="rounded-circle" alt="">
									</div>

									<div class="media-body">
										<div class="media-title">
											<a href="#">
												<span class="font-weight-semibold">Margo Baker</span>
												<span class="text-muted float-right font-size-sm">12:16</span>
											</a>
										</div>

										<span class="text-muted">That was something he was unable to do because...</span>
									</div>
								</li>

								<li class="media">
									<div class="mr-3">
										<img src="../../../../global_assets/images/demo/users/face24.jpg" width="36" height="36" class="rounded-circle" alt="">
									</div>
									<div class="media-body">
										<div class="media-title">
											<a href="#">
												<span class="font-weight-semibold">Jeremy Victorino</span>
												<span class="text-muted float-right font-size-sm">22:48</span>
											</a>
										</div>

										<span class="text-muted">But that would be extremely strained and suspicious...</span>
									</div>
								</li>

								<li class="media">
									<div class="mr-3">
										<img src="../../../../global_assets/images/demo/users/face4.jpg" width="36" height="36" class="rounded-circle" alt="">
									</div>
									<div class="media-body">
										<div class="media-title">
											<a href="#">
												<span class="font-weight-semibold">Beatrix Diaz</span>
												<span class="text-muted float-right font-size-sm">Tue</span>
											</a>
										</div>

										<span class="text-muted">What a strenuous career it is that I've chosen...</span>
									</div>
								</li>

								<li class="media">
									<div class="mr-3">
										<img src="../../../../global_assets/images/demo/users/face25.jpg" width="36" height="36" class="rounded-circle" alt="">
									</div>
									<div class="media-body">
										<div class="media-title">
											<a href="#">
												<span class="font-weight-semibold">Richard Vango</span>
												<span class="text-muted float-right font-size-sm">Mon</span>
											</a>
										</div>
										
										<span class="text-muted">Other travelling salesmen live a life of luxury...</span>
									</div>
								</li>
							</ul>
						</div>

						<div class="dropdown-content-footer justify-content-center p-0">
							<a href="#" class="bg-light text-grey w-100 py-2" data-popup="tooltip" title="Load more"><i class="icon-menu7 d-block top-0"></i></a>
						</div>
					</div>
				</li>

				<li class="nav-item dropdown dropdown-user">
					<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">
						<img src="../../../../global_assets/images/demo/users/face11.jpg" class="rounded-circle" alt="">
						<span>Victoria</span>
					</a>

					<div class="dropdown-menu dropdown-menu-right">
						<a href="#" class="dropdown-item"><i class="icon-user-plus"></i> My profile</a>
						<a href="#" class="dropdown-item"><i class="icon-coins"></i> My balance</a>
						<a href="#" class="dropdown-item"><i class="icon-comment-discussion"></i> Messages <span class="badge badge-pill bg-blue ml-auto">58</span></a>
						<div class="dropdown-divider"></div>
						<a href="#" class="dropdown-item"><i class="icon-cog5"></i> Account settings</a>
						<a href="#" class="dropdown-item"><i class="icon-switch2"></i> Logout</a>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<!-- /main navbar -->


	<!-- Page content -->
	<div class="page-content">

		<!-- Main sidebar -->
		<div class="sidebar sidebar-dark sidebar-main sidebar-expand-md">

			<!-- Sidebar mobile toggler -->
			<div class="sidebar-mobile-toggler text-center">
				<a href="#" class="sidebar-mobile-main-toggle">
					<i class="icon-arrow-right8"></i>
				</a>
				Navigation
				<a href="#" class="sidebar-mobile-expand">
					<i class="icon-screen-full"></i>
					<i class="icon-screen-normal"></i>
				</a>
			</div>
			<!-- /sidebar mobile toggler -->


			<!-- Sidebar content -->
			<div class="sidebar-content">

				<!-- User menu -->
				<div class="sidebar-user">
					<div class="card-body">
						<div class="media">
							<div class="mr-3">
								<a href="#"><img src="../../../../global_assets/images/demo/users/face11.jpg" width="38" height="38" class="rounded-circle" alt=""></a>
							</div>

							<div class="media-body">
								<div class="media-title font-weight-semibold">Victoria Baker</div>
								<div class="font-size-xs opacity-50">
									<i class="icon-pin font-size-sm"></i> &nbsp;Santa Ana, CA
								</div>
							</div>

							<div class="ml-3 align-self-center">
								<a href="#" class="text-white"><i class="icon-cog3"></i></a>
							</div>
						</div>
					</div>
				</div>
				<!-- /user menu -->


				<!-- Main navigation -->
				<div class="card card-sidebar-mobile">
					<ul class="nav nav-sidebar" data-nav-type="accordion">

						<!-- Main -->
						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Main</div> <i class="icon-menu" title="Main"></i></li>
						<li class="nav-item">
							<a href="index.html" class="nav-link">
								<i class="icon-home4"></i>
								<span>
									Dashboard
									<span class="d-block font-weight-normal opacity-50">No active orders</span>
								</span>
							</a>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-copy"></i> <span>Layouts</span></a>

							<ul class="nav nav-group-sub" data-submenu-title="Layouts">
								<li class="nav-item"><a href="index.html" class="nav-link active">Default layout</a></li>
								<li class="nav-item"><a href="../../../../layout_2/RTL/default/full/index.html" class="nav-link">Layout 2</a></li>
								<li class="nav-item"><a href="../../../../layout_3/RTL/default/full/index.html" class="nav-link">Layout 3</a></li>
								<li class="nav-item"><a href="../../../../layout_4/RTL/default/full/index.html" class="nav-link">Layout 4</a></li>
								<li class="nav-item"><a href="../../../../layout_5/RTL/default/full/index.html" class="nav-link">Layout 5</a></li>
								<li class="nav-item"><a href="../../../../layout_6/RTL/default/full/index.html" class="nav-link disabled">Layout 6 <span class="badge bg-transparent align-self-center ml-auto">Coming soon</span></a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-color-sampler"></i> <span>Themes</span></a>

							<ul class="nav nav-group-sub" data-submenu-title="Themes">
								<li class="nav-item"><a href="index.html" class="nav-link active">Default</a></li>
								<li class="nav-item"><a href="../../../RTL/material/full/index.html" class="nav-link">Material</a></li>
								<li class="nav-item"><a href="../../../RTL/dark/full/index.html" class="nav-link disabled">Dark <span class="badge bg-transparent align-self-center ml-auto">Coming soon</span></a></li>
								<li class="nav-item"><a href="../../../RTL/clean/full/index.html" class="nav-link disabled">Clean <span class="badge bg-transparent align-self-center ml-auto">Coming soon</span></a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-stack"></i> <span>Starter kit</span></a>

							<ul class="nav nav-group-sub" data-submenu-title="Starter kit">
								<li class="nav-item"><a href="../seed/layout_nav_horizontal.html" class="nav-link">Horizontal navigation</a></li>
								<li class="nav-item"><a href="../seed/sidebar_none.html" class="nav-link">No sidebar</a></li>
								<li class="nav-item"><a href="../seed/sidebar_main.html" class="nav-link">1 sidebar</a></li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">2 sidebars</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="../seed/sidebar_secondary.html" class="nav-link">Secondary sidebar</a></li>
										<li class="nav-item"><a href="../seed/sidebar_right.html" class="nav-link">Right sidebar</a></li>
									</ul>
								</li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">3 sidebars</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="../seed/sidebar_right_hidden.html" class="nav-link">Right sidebar hidden</a></li>
										<li class="nav-item"><a href="../seed/sidebar_right_visible.html" class="nav-link">Right sidebar visible</a></li>
									</ul>
								</li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Content sidebars</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="../seed/sidebar_content_left.html" class="nav-link">Left sidebar</a></li>
										<li class="nav-item"><a href="../seed/sidebar_content_right.html" class="nav-link">Right sidebar</a></li>
									</ul>
								</li>
								<li class="nav-item"><a href="../seed/layout_boxed.html" class="nav-link">Boxed layout</a></li>
								<li class="nav-item-divider"></li>
								<li class="nav-item"><a href="../seed/navbar_fixed_main.html" class="nav-link">Fixed main navbar</a></li>
								<li class="nav-item"><a href="../seed/navbar_fixed_secondary.html" class="nav-link">Fixed secondary navbar</a></li>
								<li class="nav-item"><a href="../seed/navbar_fixed_both.html" class="nav-link">Both navbars fixed</a></li>
								<li class="nav-item"><a href="../seed/layout_fixed.html" class="nav-link">Fixed layout</a></li>
							</ul>
						</li>
						<li class="nav-item">
							<a href="changelog.html" class="nav-link">
								<i class="icon-list-unordered"></i>
								<span>Changelog</span>
								<span class="badge bg-blue-400 align-self-center ml-auto">2.0</span>
							</a>
						</li>
						<li class="nav-item"><a href="../../../LTR/default/full/index.html" class="nav-link"><i class="icon-width"></i> <span>LTR version</span></a></li>
						<!-- /main -->

						<!-- Forms -->
						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Forms</div> <i class="icon-menu" title="Forms"></i></li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-pencil3"></i> <span>Form components</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Form components">
								<li class="nav-item"><a href="form_inputs.html" class="nav-link">Basic inputs</a></li>
								<li class="nav-item"><a href="form_checkboxes_radios.html" class="nav-link">Checkboxes &amp; radios</a></li>
								<li class="nav-item"><a href="form_select2.html" class="nav-link">Select2 selects</a></li>
								<li class="nav-item"><a href="form_multiselect.html" class="nav-link">Bootstrap multiselect</a></li>
								<li class="nav-item"><a href="form_input_groups.html" class="nav-link">Input groups</a></li>
								<li class="nav-item"><a href="form_controls_extended.html" class="nav-link">Extended controls</a></li>
								<li class="nav-item"><a href="form_floating_labels.html" class="nav-link">Floating labels</a></li>
								<li class="nav-item"><a href="form_tag_inputs.html" class="nav-link">Tag inputs</a></li>
								<li class="nav-item"><a href="form_dual_listboxes.html" class="nav-link">Dual Listboxes</a></li>
								<li class="nav-item"><a href="form_validation.html" class="nav-link">Validation</a></li>
								<li class="nav-item"><a href="form_wizard.html" class="nav-link">Form wizard</a></li>
								<li class="nav-item"><a href="form_actions.html" class="nav-link">Form actions</a></li>
								<li class="nav-item"><a href="form_inputs_grid.html" class="nav-link">Inputs grid</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-file-css"></i> <span>JSON forms</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="JSON forms">
								<li class="nav-item"><a href="alpaca_basic.html" class="nav-link">Basic inputs</a></li>
								<li class="nav-item"><a href="alpaca_advanced.html" class="nav-link">Advanced inputs</a></li>
								<li class="nav-item"><a href="alpaca_controls.html" class="nav-link">Controls</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-spell-check"></i> <span>Text editors</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Text editors">
								<li class="nav-item"><a href="editor_summernote.html" class="nav-link">Summernote editor</a></li>
								<li class="nav-item"><a href="editor_ckeditor.html" class="nav-link">CKEditor</a></li>
								<li class="nav-item"><a href="editor_trumbowyg.html" class="nav-link">Trumbowyg editor</a></li>
								<li class="nav-item"><a href="editor_code.html" class="nav-link">Code editor</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-select2"></i> <span>Pickers</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Pickers">
								<li class="nav-item"><a href="picker_date.html" class="nav-link">Date &amp; time pickers</a></li>
								<li class="nav-item"><a href="picker_color.html" class="nav-link">Color pickers</a></li>
								<li class="nav-item"><a href="picker_location.html" class="nav-link">Location pickers</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-insert-template"></i> <span>Form layouts</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Form layouts">
								<li class="nav-item"><a href="form_layout_vertical.html" class="nav-link">Vertical form</a></li>
								<li class="nav-item"><a href="form_layout_vertical_styled.html" class="nav-link disabled">Custom styles <span class="badge bg-transparent align-self-center ml-auto">Coming soon</span></a></li>
								<li class="nav-item-divider"></li>
								<li class="nav-item"><a href="form_layout_horizontal.html" class="nav-link">Horizontal form</a></li>
								<li class="nav-item"><a href="form_layout_horizontal_styled.html" class="nav-link disabled">Custom styles <span class="badge bg-transparent align-self-center ml-auto">Coming soon</span></a></li>
							</ul>
						</li>
						<!-- /forms -->

						<!-- Components -->
						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Components</div> <i class="icon-menu" title="Components"></i></li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-grid"></i> <span>Basic components</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Basic components">
								<li class="nav-item"><a href="components_modals.html" class="nav-link">Modals</a></li>
								<li class="nav-item"><a href="components_dropdowns.html" class="nav-link">Dropdown menus</a></li>
								<li class="nav-item"><a href="components_tabs.html" class="nav-link">Tabs component</a></li>
								<li class="nav-item"><a href="components_pills.html" class="nav-link">Pills component</a></li>
								<li class="nav-item"><a href="components_collapsible.html" class="nav-link">Collapsible</a></li>
								<li class="nav-item"><a href="components_navs.html" class="nav-link">Navs</a></li>
								<li class="nav-item"><a href="components_buttons.html" class="nav-link">Buttons</a></li>
								<li class="nav-item"><a href="components_popups.html" class="nav-link">Tooltips and popovers</a></li>
								<li class="nav-item"><a href="components_alerts.html" class="nav-link">Alerts</a></li>
								<li class="nav-item"><a href="components_pagination.html" class="nav-link">Pagination</a></li>
								<li class="nav-item"><a href="components_badges.html" class="nav-link">Badges</a></li>
								<li class="nav-item"><a href="components_progress.html" class="nav-link">Progress</a></li>
								<li class="nav-item"><a href="components_breadcrumbs.html" class="nav-link">Breadcrumbs</a></li>
								<li class="nav-item"><a href="components_media.html" class="nav-link">Media objects</a></li>
								<li class="nav-item"><a href="components_scrollspy.html" class="nav-link">Scrollspy</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-puzzle2"></i> <span>Content styling</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Content styling">
								<li class="nav-item"><a href="content_page_header.html" class="nav-link">Page header</a></li>
								<li class="nav-item"><a href="content_page_footer.html" class="nav-link disabled">Page footer <span class="badge bg-transparent align-self-center ml-auto">Coming soon</span></a></li>
								<li class="nav-item-divider"></li>
								<li class="nav-item"><a href="content_cards.html" class="nav-link">Cards</a></li>
								<li class="nav-item"><a href="content_cards_content.html" class="nav-link">Card content</a></li>
								<li class="nav-item"><a href="content_cards_layouts.html" class="nav-link">Card layouts</a></li>
								<li class="nav-item"><a href="content_cards_header.html" class="nav-link">Card header elements</a></li>
								<li class="nav-item"><a href="content_cards_footer.html" class="nav-link">Card footer elements</a></li>
								<li class="nav-item"><a href="content_cards_draggable.html" class="nav-link">Draggable cards</a></li>
								<li class="nav-item-divider"></li>
								<li class="nav-item"><a href="content_text_styling.html" class="nav-link">Text styling</a></li>
								<li class="nav-item"><a href="content_typography.html" class="nav-link">Typography</a></li>
								<li class="nav-item"><a href="content_helpers.html" class="nav-link">Helper classes</a></li>
								<li class="nav-item"><a href="content_helpers_flex.html" class="nav-link">Flex utilities</a></li>
								<li class="nav-item"><a href="content_syntax_highlighter.html" class="nav-link">Syntax highlighter</a></li>
								<li class="nav-item"><a href="content_grid.html" class="nav-link">Grid system</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-gift"></i> <span>Extra components</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Extra components">
								<li class="nav-item"><a href="extra_pnotify.html" class="nav-link">PNotify notifications</a></li>
								<li class="nav-item"><a href="extra_jgrowl_noty.html" class="nav-link">jGrowl and Noty notifications</a></li>
								<li class="nav-item"><a href="extra_sweetalert.html" class="nav-link">SweetAlert notifications</a></li>
								<li class="nav-item-divider"></li>
								<li class="nav-item"><a href="extra_sliders_noui.html" class="nav-link">NoUI sliders</a></li>
								<li class="nav-item"><a href="extra_sliders_ion.html" class="nav-link">Ion range sliders</a></li>
								<li class="nav-item"><a href="extra_trees.html" class="nav-link">Dynamic tree views</a></li>
								<li class="nav-item"><a href="extra_context_menu.html" class="nav-link">Context menu</a></li>
								<li class="nav-item"><a href="extra_fab.html" class="nav-link">Floating action buttons</a></li>
								<li class="nav-item"><a href="extra_session_timeout.html" class="nav-link">Session timeout</a></li>
								<li class="nav-item"><a href="extra_idle_timeout.html" class="nav-link">Idle timeout</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-droplet2"></i> <span>Color system</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Color system">
								<li class="nav-item"><a href="colors_primary.html" class="nav-link">Primary palette</a></li>
								<li class="nav-item"><a href="colors_danger.html" class="nav-link">Danger palette</a></li>
								<li class="nav-item"><a href="colors_success.html" class="nav-link">Success palette</a></li>
								<li class="nav-item"><a href="colors_warning.html" class="nav-link">Warning palette</a></li>
								<li class="nav-item"><a href="colors_info.html" class="nav-link">Info palette</a></li>
								<li class="nav-item-divider"></li>
								<li class="nav-item"><a href="colors_pink.html" class="nav-link">Pink palette</a></li>
								<li class="nav-item"><a href="colors_violet.html" class="nav-link">Violet palette</a></li>
								<li class="nav-item"><a href="colors_purple.html" class="nav-link">Purple palette</a></li>
								<li class="nav-item"><a href="colors_indigo.html" class="nav-link">Indigo palette</a></li>
								<li class="nav-item"><a href="colors_blue.html" class="nav-link">Blue palette</a></li>
								<li class="nav-item"><a href="colors_teal.html" class="nav-link">Teal palette</a></li>
								<li class="nav-item"><a href="colors_green.html" class="nav-link">Green palette</a></li>
								<li class="nav-item"><a href="colors_orange.html" class="nav-link">Orange palette</a></li>
								<li class="nav-item"><a href="colors_brown.html" class="nav-link">Brown palette</a></li>
								<li class="nav-item"><a href="colors_grey.html" class="nav-link">Grey palette</a></li>
								<li class="nav-item"><a href="colors_slate.html" class="nav-link">Slate palette</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-spinner2 spinner"></i> <span>Animations</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Animations">
								<li class="nav-item"><a href="animations_css3.html" class="nav-link">CSS3 animations</a></li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Velocity animations</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="animations_velocity_basic.html" class="nav-link">Basic usage</a></li>
										<li class="nav-item"><a href="animations_velocity_ui.html" class="nav-link">UI pack effects</a></li>
										<li class="nav-item"><a href="animations_velocity_examples.html" class="nav-link">Advanced examples</a></li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-thumbs-up2"></i> <span>Icons</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Icons">
								<li class="nav-item"><a href="icons_icomoon.html" class="nav-link">Icomoon</a></li>
								<li class="nav-item"><a href="icons_material.html" class="nav-link">Material</a></li>
								<li class="nav-item"><a href="icons_fontawesome.html" class="nav-link">Font awesome</a></li>
							</ul>
						</li>
						<!-- /components -->

						<!-- Layout -->
						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Layout</div> <i class="icon-menu" title="Layout options"></i></li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-stack2"></i> <span>Page layouts</span></a>

							<ul class="nav nav-group-sub" data-submenu-title="Page layouts">
								<li class="nav-item"><a href="layout_fixed_navbar.html" class="nav-link">Fixed navbar</a></li>
								<li class="nav-item"><a href="layout_fixed_sidebar_custom.html" class="nav-link">Fixed sidebar - custom scroll</a></li>
								<li class="nav-item"><a href="layout_fixed_sidebar_native.html" class="nav-link">Fixed sidebar - native scroll</a></li>
								<li class="nav-item"><a href="layout_fixed_hideable_navbar.html" class="nav-link">Hideable navbar</a></li>
								<li class="nav-item"><a href="layout_fixed_footer.html" class="nav-link">Fixed footer</a></li>
								<li class="nav-item-divider"></li>
								<li class="nav-item"><a href="layout_boxed_default.html" class="nav-link">Boxed with default sidebar</a></li>
								<li class="nav-item"><a href="layout_boxed_mini.html" class="nav-link">Boxed with mini sidebar</a></li>
								<li class="nav-item"><a href="layout_boxed_full.html" class="nav-link">Boxed full width</a></li>
								<li class="nav-item"><a href="layout_boxed_content.html" class="nav-link">Boxed content</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-indent-decrease2"></i> <span>Sidebars</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Sidebars">
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Main sidebar</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="sidebar_default_collapse.html" class="nav-link">Default collapsible</a></li>
										<li class="nav-item"><a href="sidebar_default_hide.html" class="nav-link">Default hideable</a></li>
										<li class="nav-item"><a href="sidebar_default_hidden.html" class="nav-link">Default hidden</a></li>
										<li class="nav-item"><a href="sidebar_mini_collapse.html" class="nav-link">Mini collapsible</a></li>
										<li class="nav-item"><a href="sidebar_mini_hide.html" class="nav-link">Mini hideable</a></li>
										<li class="nav-item"><a href="sidebar_mini_hidden.html" class="nav-link">Mini hidden</a></li>
										<li class="nav-item-divider"></li>
										<li class="nav-item"><a href="sidebar_default_color_light.html" class="nav-link">Light color</a></li>
										<li class="nav-item"><a href="sidebar_default_color_custom.html" class="nav-link">Custom color</a></li>
									</ul>
								</li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Secondary sidebar</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="sidebar_secondary_after.html" class="nav-link">After default</a></li>
										<li class="nav-item"><a href="sidebar_secondary_before.html" class="nav-link">Before default</a></li>
										<li class="nav-item"><a href="sidebar_secondary_hidden.html" class="nav-link">Hidden by default</a></li>
										<li class="nav-item-divider"></li>
										<li class="nav-item"><a href="sidebar_secondary_color_dark.html" class="nav-link">Dark color</a></li>
										<li class="nav-item"><a href="sidebar_secondary_color_custom.html" class="nav-link">Custom color</a></li>
									</ul>
								</li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Right sidebar</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="sidebar_right_default_collapse.html" class="nav-link">Show - collapse main</a></li>
										<li class="nav-item"><a href="sidebar_right_default_hide.html" class="nav-link">Show - hide main</a></li>
										<li class="nav-item"><a href="sidebar_right_default_toggle.html" class="nav-link">Show - fix default width</a></li>
										<li class="nav-item"><a href="sidebar_right_mini_toggle.html" class="nav-link">Show - fix mini width</a></li>
										<li class="nav-item"><a href="sidebar_right_secondary_hide.html" class="nav-link">Show - hide secondary</a></li>
										<li class="nav-item"><a href="sidebar_right_visible.html" class="nav-link">Visible by default</a></li>
										<li class="nav-item-divider"></li>
										<li class="nav-item"><a href="sidebar_right_color_dark.html" class="nav-link">Dark color</a></li>
										<li class="nav-item"><a href="sidebar_right_color_custom.html" class="nav-link">Custom color</a></li>
									</ul>
								</li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Content sidebar</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="sidebar_content_left.html" class="nav-link">Left position</a></li>
										<li class="nav-item"><a href="sidebar_content_left_stretch.html" class="nav-link">Left stretched</a></li>
										<li class="nav-item"><a href="sidebar_content_left_hidden.html" class="nav-link">Left hidden</a></li>
										<li class="nav-item"><a href="sidebar_content_right.html" class="nav-link">Right position</a></li>
										<li class="nav-item"><a href="sidebar_content_right_stretch.html" class="nav-link">Right stretched</a></li>
										<li class="nav-item"><a href="sidebar_content_right_hidden.html" class="nav-link">Right hidden</a></li>
										<li class="nav-item"><a href="sidebar_content_sections.html" class="nav-link">Sectioned sidebar</a></li>
										<li class="nav-item-divider"></li>
										<li class="nav-item"><a href="sidebar_content_color_dark.html" class="nav-link">Dark color</a></li>
										<li class="nav-item"><a href="sidebar_content_color_custom.html" class="nav-link">Custom color</a></li>
										<li class="nav-item"><a href="sidebar_content_color_sections_custom.html" class="nav-link">Custom sections color</a></li>
									</ul>
								</li>
								<li class="nav-item-divider"></li>
								<li class="nav-item"><a href="sidebar_components.html" class="nav-link">Sidebar components</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-menu3"></i> <span>Navbars</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Navbars">
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Single navbar</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="navbar_single_top_static.html" class="nav-link">Single top static</a></li>
										<li class="nav-item"><a href="navbar_single_top_fixed.html" class="nav-link">Single top fixed</a></li>
										<li class="nav-item"><a href="navbar_single_bottom_static.html" class="nav-link">Single bottom static</a></li>
										<li class="nav-item"><a href="navbar_single_bottom_fixed.html" class="nav-link">Single bottom fixed</a></li>
										<li class="nav-item"><a href="navbar_single_header_before.html" class="nav-link">Before page header</a></li>
										<li class="nav-item"><a href="navbar_single_header_after.html" class="nav-link">After page header</a></li>
										<li class="nav-item"><a href="navbar_single_content_after.html" class="nav-link">After page content</a></li>
									</ul>
								</li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Multiple navbars</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="navbar_multiple_top_static.html" class="nav-link">Multiple top static</a></li>
										<li class="nav-item"><a href="navbar_multiple_top_fixed.html" class="nav-link">Multiple top fixed</a></li>
										<li class="nav-item"><a href="navbar_multiple_bottom_static.html" class="nav-link">Multiple bottom static</a></li>
										<li class="nav-item"><a href="navbar_multiple_bottom_fixed.html" class="nav-link">Multiple bottom fixed</a></li>
										<li class="nav-item"><a href="navbar_multiple_top_bottom.html" class="nav-link">Multiple - top and bottom</a></li>
										<li class="nav-item"><a href="navbar_multiple_secondary_sticky.html" class="nav-link">Multiple - secondary sticky</a></li>
									</ul>
								</li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Content navbar</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="navbar_component_single.html" class="nav-link">Single navbar</a></li>
										<li class="nav-item"><a href="navbar_component_multiple.html" class="nav-link">Multiple navbars</a></li>
									</ul>
								</li>
								<li class="nav-item-divider"></li>
								<li class="nav-item"><a href="navbar_colors.html" class="nav-link">Color options</a></li>
								<li class="nav-item"><a href="navbar_sizes.html" class="nav-link">Sizing options</a></li>
								<li class="nav-item"><a href="navbar_hideable.html" class="nav-link">Hide on scroll</a></li>
								<li class="nav-item"><a href="navbar_components.html" class="nav-link">Navbar components</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-sort"></i> <span>Vertical navigation</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Vertical navigation">
								<li class="nav-item"><a href="navigation_vertical_collapsible.html" class="nav-link">Collapsible menu</a></li>
								<li class="nav-item"><a href="navigation_vertical_accordion.html" class="nav-link">Accordion menu</a></li>
								<li class="nav-item"><a href="navigation_vertical_bordered.html" class="nav-link">Bordered navigation</a></li>
								<li class="nav-item"><a href="navigation_vertical_right_icons.html" class="nav-link">Right icons</a></li>
								<li class="nav-item"><a href="navigation_vertical_badges.html" class="nav-link">Badges</a></li>
								<li class="nav-item"><a href="navigation_vertical_disabled.html" class="nav-link">Disabled items</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu nav-item-expanded nav-item-open">
							<a href="#" class="nav-link"><i class="icon-transmission"></i> <span>Horizontal navigation</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Horizontal navigation">
								<li class="nav-item"><a href="navigation_horizontal_click.html" class="nav-link">Submenu on click</a></li>
								<li class="nav-item"><a href="navigation_horizontal_hover.html" class="nav-link">Submenu on hover</a></li>
								<li class="nav-item"><a href="navigation_horizontal_elements.html" class="nav-link">With custom elements</a></li>
								<li class="nav-item"><a href="navigation_horizontal_tabs.html" class="nav-link">Tabbed navigation</a></li>
								<li class="nav-item"><a href="navigation_horizontal_disabled.html" class="nav-link">Disabled navigation links</a></li>
								<li class="nav-item"><a href="navigation_horizontal_mega.html" class="nav-link active">Horizontal mega menu</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-tree5"></i> <span>Menu levels</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Menu levels">
								<li class="nav-item"><a href="#" class="nav-link"><i class="icon-IE"></i> Second level</a></li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link"><i class="icon-firefox"></i> Second level with child</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="#" class="nav-link"><i class="icon-android"></i> Third level</a></li>
										<li class="nav-item nav-item-submenu">
											<a href="#" class="nav-link"><i class="icon-apple2"></i> Third level with child</a>
											<ul class="nav nav-group-sub">
												<li class="nav-item"><a href="#" class="nav-link"><i class="icon-html5"></i> Fourth level</a></li>
												<li class="nav-item"><a href="#" class="nav-link"><i class="icon-css3"></i> Fourth level</a></li>
											</ul>
										</li>
										<li class="nav-item"><a href="#" class="nav-link"><i class="icon-windows"></i> Third level</a></li>
									</ul>
								</li>
								<li class="nav-item"><a href="#" class="nav-link"><i class="icon-chrome"></i> Second level</a></li>
							</ul>
						</li>
						<!-- /layout -->

						<!-- Data visualization -->
						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Data visualization</div> <i class="icon-menu" title="Data visualization"></i></li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-graph"></i> <span>Echarts library</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="ECharts library">
								<li class="nav-item"><a href="echarts_lines.html" class="nav-link">Line charts</a></li>
								<li class="nav-item"><a href="echarts_areas.html" class="nav-link">Area charts</a></li>
								<li class="nav-item"><a href="echarts_columns_waterfalls.html" class="nav-link">Columns and waterfalls</a></li>
								<li class="nav-item"><a href="echarts_bars_tornados.html" class="nav-link">Bars and tornados</a></li>
								<li class="nav-item"><a href="echarts_scatter.html" class="nav-link">Scatter charts</a></li>
								<li class="nav-item"><a href="echarts_pies_donuts.html" class="nav-link">Pies and donuts</a></li>
								<li class="nav-item"><a href="echarts_funnels_calendars.html" class="nav-link">Funnels and calendars</a></li>
								<li class="nav-item"><a href="echarts_candlesticks_others.html" class="nav-link">Candlesticks and others</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-statistics"></i> <span>D3 library</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="D3 library">
								<li class="nav-item"><a href="d3_lines_basic.html" class="nav-link">Simple lines</a></li>
								<li class="nav-item"><a href="d3_lines_advanced.html" class="nav-link">Advanced lines</a></li>
								<li class="nav-item"><a href="d3_bars_basic.html" class="nav-link">Simple bars</a></li>
								<li class="nav-item"><a href="d3_bars_advanced.html" class="nav-link">Advanced bars</a></li>
								<li class="nav-item"><a href="d3_pies.html" class="nav-link">Pie charts</a></li>
								<li class="nav-item"><a href="d3_circle_diagrams.html" class="nav-link">Circle diagrams</a></li>
								<li class="nav-item"><a href="d3_tree.html" class="nav-link">Tree layout</a></li>
								<li class="nav-item"><a href="d3_other.html" class="nav-link">Other charts</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-stats-dots"></i> <span>Dimple library</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Dimple library">
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Line charts</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="dimple_lines_horizontal.html" class="nav-link">Horizontal orientation</a></li>
										<li class="nav-item"><a href="dimple_lines_vertical.html" class="nav-link">Vertical orientation</a></li>
									</ul>
								</li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Bar charts</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="dimple_bars_horizontal.html" class="nav-link">Horizontal orientation</a></li>
										<li class="nav-item"><a href="dimple_bars_vertical.html" class="nav-link">Vertical orientation</a></li>
									</ul>
								</li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Area charts</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="dimple_area_horizontal.html" class="nav-link">Horizontal orientation</a></li>
										<li class="nav-item"><a href="dimple_area_vertical.html" class="nav-link">Vertical orientation</a></li>
									</ul>
								</li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Step charts</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="dimple_step_horizontal.html" class="nav-link">Horizontal orientation</a></li>
										<li class="nav-item"><a href="dimple_step_vertical.html" class="nav-link">Vertical orientation</a></li>
									</ul>
								</li>
								<li class="nav-item"><a href="dimple_pies.html" class="nav-link">Pie charts</a></li>
								<li class="nav-item"><a href="dimple_rings.html" class="nav-link">Ring charts</a></li>
								<li class="nav-item"><a href="dimple_scatter.html" class="nav-link">Scatter charts</a></li>
								<li class="nav-item"><a href="dimple_bubble.html" class="nav-link">Bubble charts</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-stats-bars"></i> <span>C3 library</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="C3 library">
								<li class="nav-item"><a href="c3_lines_areas.html" class="nav-link">Lines and areas</a></li>
								<li class="nav-item"><a href="c3_bars_pies.html" class="nav-link">Bars and pies</a></li>
								<li class="nav-item"><a href="c3_advanced.html" class="nav-link">Advanced examples</a></li>
								<li class="nav-item"><a href="c3_axis.html" class="nav-link">Chart axis</a></li>
								<li class="nav-item"><a href="c3_grid.html" class="nav-link">Grid options</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-google"></i> <span>Google charts</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Google charts">
								<li class="nav-item"><a href="google_lines.html" class="nav-link">Line charts</a></li>
								<li class="nav-item"><a href="google_bars.html" class="nav-link">Bar charts</a></li>
								<li class="nav-item"><a href="google_pies.html" class="nav-link">Pie charts</a></li>
								<li class="nav-item"><a href="google_scatter_bubble.html" class="nav-link">Bubble &amp; scatter charts</a></li>
								<li class="nav-item"><a href="google_other.html" class="nav-link">Other charts</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-map5"></i> <span>Maps integration</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Maps integration">
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Google maps</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="maps_google_basic.html" class="nav-link">Basics</a></li>
										<li class="nav-item"><a href="maps_google_controls.html" class="nav-link">Controls</a></li>
										<li class="nav-item"><a href="maps_google_markers.html" class="nav-link">Markers</a></li>
										<li class="nav-item"><a href="maps_google_drawings.html" class="nav-link">Map drawings</a></li>
										<li class="nav-item"><a href="maps_google_layers.html" class="nav-link">Layers</a></li>
									</ul>
								</li>
								<li class="nav-item"><a href="maps_vector.html" class="nav-link">Vector maps</a></li>
								<li class="nav-item"><a href="maps_echarts.html" class="nav-link disabled">ECharts maps <span class="badge bg-transparent align-self-center ml-auto">Coming soon</span></a></li>
							</ul>
						</li>
						<!-- /data visualization -->

						<!-- Extensions -->
						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Extensions</div> <i class="icon-menu" title="Extensions"></i></li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-puzzle4"></i> <span>Extensions</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Extensions">
								<li class="nav-item"><a href="extension_image_cropper.html" class="nav-link">Image cropper</a></li>
								<li class="nav-item"><a href="extension_blockui.html" class="nav-link">Block UI</a></li>
								<li class="nav-item"><a href="extension_dnd.html" class="nav-link">Drag and drop</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-popout"></i> <span>JQuery UI</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="jQuery UI">
								<li class="nav-item"><a href="jqueryui_interactions.html" class="nav-link">Interactions</a></li>
								<li class="nav-item"><a href="jqueryui_forms.html" class="nav-link">Forms</a></li>
								<li class="nav-item"><a href="jqueryui_components.html" class="nav-link">Components</a></li>
								<li class="nav-item"><a href="jqueryui_sliders.html" class="nav-link">Sliders</a></li>
								<li class="nav-item"><a href="jqueryui_navigation.html" class="nav-link">Navigation</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-upload"></i> <span>File uploaders</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="File uploaders">
								<li class="nav-item"><a href="uploader_plupload.html" class="nav-link">Plupload</a></li>
								<li class="nav-item"><a href="uploader_bootstrap.html" class="nav-link">Bootstrap file uploader</a></li>
								<li class="nav-item"><a href="uploader_dropzone.html" class="nav-link">Dropzone</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-calendar3"></i> <span>Event calendars</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Event calendars">
								<li class="nav-item"><a href="fullcalendar_views.html" class="nav-link">Basic views</a></li>
								<li class="nav-item"><a href="fullcalendar_styling.html" class="nav-link">Event styling</a></li>
								<li class="nav-item"><a href="fullcalendar_formats.html" class="nav-link">Language and time</a></li>
								<li class="nav-item"><a href="fullcalendar_advanced.html" class="nav-link">Advanced usage</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-sphere"></i> <span>Internationalization</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Internationalization">
								<li class="nav-item"><a href="internationalization_switch_direct.html" class="nav-link">Direct translation</a></li>
								<li class="nav-item"><a href="internationalization_switch_query.html" class="nav-link">Querystring parameter</a></li>
								<li class="nav-item"><a href="internationalization_fallback.html" class="nav-link">Language fallback</a></li>
								<li class="nav-item"><a href="internationalization_callbacks.html" class="nav-link">Callbacks</a></li>
							</ul>
						</li>
						<!-- /extensions -->

						<!-- Tables -->
						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Tables</div> <i class="icon-menu" title="Tables"></i></li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-table2"></i> <span>Basic tables</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Basic tables">
								<li class="nav-item"><a href="table_basic.html" class="nav-link">Basic examples</a></li>
								<li class="nav-item"><a href="table_sizing.html" class="nav-link">Table sizing</a></li>
								<li class="nav-item"><a href="table_borders.html" class="nav-link">Table borders</a></li>
								<li class="nav-item"><a href="table_styling.html" class="nav-link">Table styling</a></li>
								<li class="nav-item"><a href="table_elements.html" class="nav-link">Table elements</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-grid7"></i> <span>Data tables</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Data tables">
								<li class="nav-item"><a href="datatable_basic.html" class="nav-link">Basic initialization</a></li>
								<li class="nav-item"><a href="datatable_styling.html" class="nav-link">Basic styling</a></li>
								<li class="nav-item"><a href="datatable_advanced.html" class="nav-link">Advanced examples</a></li>
								<li class="nav-item"><a href="datatable_sorting.html" class="nav-link">Sorting options</a></li>
								<li class="nav-item"><a href="datatable_api.html" class="nav-link">Using API</a></li>
								<li class="nav-item"><a href="datatable_data_sources.html" class="nav-link">Data sources</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-alignment-unalign"></i> <span>Data tables extensions</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Data tables extensions">
								<li class="nav-item"><a href="datatable_extension_reorder.html" class="nav-link">Columns reorder</a></li>
								<li class="nav-item"><a href="datatable_extension_row_reorder.html" class="nav-link">Row reorder</a></li>
								<li class="nav-item"><a href="datatable_extension_fixed_columns.html" class="nav-link">Fixed columns</a></li>
								<li class="nav-item"><a href="datatable_extension_fixed_header.html" class="nav-link">Fixed header</a></li>
								<li class="nav-item"><a href="datatable_extension_autofill.html" class="nav-link">Auto fill</a></li>
								<li class="nav-item"><a href="datatable_extension_key_table.html" class="nav-link">Key table</a></li>
								<li class="nav-item"><a href="datatable_extension_scroller.html" class="nav-link">Scroller</a></li>
								<li class="nav-item"><a href="datatable_extension_select.html" class="nav-link">Select</a></li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Buttons</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="datatable_extension_buttons_init.html" class="nav-link">Initialization</a></li>
										<li class="nav-item"><a href="datatable_extension_buttons_flash.html" class="nav-link">Flash buttons</a></li>
										<li class="nav-item"><a href="datatable_extension_buttons_print.html" class="nav-link">Print buttons</a></li>
										<li class="nav-item"><a href="datatable_extension_buttons_html5.html" class="nav-link">HTML5 buttons</a></li>
									</ul>
								</li>
								<li class="nav-item"><a href="datatable_extension_colvis.html" class="nav-link">Columns visibility</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-file-spreadsheet"></i> <span>Handsontable</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Handsontable">
								<li class="nav-item"><a href="handsontable_basic.html" class="nav-link">Basic configuration</a></li>
								<li class="nav-item"><a href="handsontable_advanced.html" class="nav-link">Advanced setup</a></li>
								<li class="nav-item"><a href="handsontable_cols.html" class="nav-link">Column features</a></li>
								<li class="nav-item"><a href="handsontable_cells.html" class="nav-link">Cell features</a></li>
								<li class="nav-item"><a href="handsontable_types.html" class="nav-link">Basic cell types</a></li>
								<li class="nav-item"><a href="handsontable_custom_checks.html" class="nav-link">Custom &amp; checkboxes</a></li>
								<li class="nav-item"><a href="handsontable_ac_password.html" class="nav-link">Autocomplete &amp; password</a></li>
								<li class="nav-item"><a href="handsontable_search.html" class="nav-link">Search</a></li>
								<li class="nav-item"><a href="handsontable_context.html" class="nav-link">Context menu</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-versions"></i> <span>Responsive tables</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Responsive tables">
								<li class="nav-item"><a href="table_responsive.html" class="nav-link">Responsive basic tables</a></li>
								<li class="nav-item"><a href="datatable_responsive.html" class="nav-link">Responsive data tables</a></li>
							</ul>
						</li>
						<!-- /tables -->

						<!-- Page kits -->
						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Page kits</div> <i class="icon-menu" title="Page kits"></i></li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-grid6"></i> <span>General pages</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="General pages">
								<li class="nav-item"><a href="general_feed.html" class="nav-link">Feed</a></li>
								<li class="nav-item"><a href="general_embeds.html" class="nav-link">Embeds</a></li>
								<li class="nav-item"><a href="general_faq.html" class="nav-link">FAQ page</a></li>
								<li class="nav-item"><a href="general_knowledgebase.html" class="nav-link">Knowledgebase</a></li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Blog</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="blog_classic_v.html" class="nav-link">Classic vertical</a></li>
										<li class="nav-item"><a href="blog_classic_h.html" class="nav-link">Classic horizontal</a></li>
										<li class="nav-item"><a href="blog_grid.html" class="nav-link">Grid</a></li>
										<li class="nav-item"><a href="blog_single.html" class="nav-link">Single post</a></li>
										<li class="nav-item-divider"></li>
										<li class="nav-item"><a href="blog_sidebar_left.html" class="nav-link">Left sidebar</a></li>
										<li class="nav-item"><a href="blog_sidebar_right.html" class="nav-link">Right sidebar</a></li>
									</ul>
								</li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Timelines</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="timelines_left.html" class="nav-link">Left timeline</a></li>
										<li class="nav-item"><a href="timelines_right.html" class="nav-link">Right timeline</a></li>
										<li class="nav-item"><a href="timelines_center.html" class="nav-link">Centered timeline</a></li>
									</ul>
								</li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Gallery</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="gallery_grid.html" class="nav-link">Media grid</a></li>
										<li class="nav-item"><a href="gallery_titles.html" class="nav-link">Media with titles</a></li>
										<li class="nav-item"><a href="gallery_description.html" class="nav-link">Media with description</a></li>
										<li class="nav-item"><a href="gallery_library.html" class="nav-link">Media library</a></li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-wrench3"></i> <span>Service pages</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Service pages">
								<li class="nav-item"><a href="service_sitemap.html" class="nav-link">Sitemap</a></li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Invoicing</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="invoice_template.html" class="nav-link">Invoice template</a></li>
										<li class="nav-item"><a href="invoice_grid.html" class="nav-link">Invoice grid</a></li>
										<li class="nav-item"><a href="invoice_archive.html" class="nav-link">Invoice archive</a></li>
									</ul>
								</li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Authentication</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="login_simple.html" class="nav-link">Simple login</a></li>
										<li class="nav-item"><a href="login_advanced.html" class="nav-link">More login info</a></li>
										<li class="nav-item"><a href="login_registration.html" class="nav-link">Simple registration</a></li>
										<li class="nav-item"><a href="login_registration_advanced.html" class="nav-link">More registration info</a></li>
										<li class="nav-item"><a href="login_unlock.html" class="nav-link">Unlock user</a></li>
										<li class="nav-item"><a href="login_password_recover.html" class="nav-link">Reset password</a></li>
										<li class="nav-item"><a href="login_hide_navbar.html" class="nav-link">Hide navbar</a></li>
										<li class="nav-item"><a href="login_transparent.html" class="nav-link">Transparent box</a></li>
										<li class="nav-item"><a href="login_background.html" class="nav-link">Background option</a></li>
										<li class="nav-item"><a href="login_validation.html" class="nav-link">With validation</a></li>
										<li class="nav-item"><a href="login_tabbed.html" class="nav-link">Tabbed form</a></li>
										<li class="nav-item"><a href="login_modals.html" class="nav-link">Inside modals</a></li>
									</ul>
								</li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Error pages</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="error_403.html" class="nav-link">Error 403</a></li>
										<li class="nav-item"><a href="error_404.html" class="nav-link">Error 404</a></li>
										<li class="nav-item"><a href="error_405.html" class="nav-link">Error 405</a></li>
										<li class="nav-item"><a href="error_500.html" class="nav-link">Error 500</a></li>
										<li class="nav-item"><a href="error_503.html" class="nav-link">Error 503</a></li>
										<li class="nav-item"><a href="error_offline.html" class="nav-link">Offline page</a></li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-people"></i> <span>User pages</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="User pages">
								<li class="nav-item"><a href="user_pages_list.html" class="nav-link">User list</a></li>
								<li class="nav-item"><a href="user_pages_cards.html" class="nav-link">User cards</a></li>
								<li class="nav-item"><a href="user_pages_profile.html" class="nav-link">Simple profile</a></li>
								<li class="nav-item"><a href="user_pages_profile_tabbed.html" class="nav-link">Tabbed profile</a></li>
								<li class="nav-item"><a href="user_pages_profile_cover.html" class="nav-link">Profile with cover</a></li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-cube3"></i> <span>Application pages</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Application pages">
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Task manager</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="task_manager_grid.html" class="nav-link">Task grid</a></li>
										<li class="nav-item"><a href="task_manager_list.html" class="nav-link">Task list</a></li>
										<li class="nav-item"><a href="task_manager_detailed.html" class="nav-link">Task detailed</a></li>
									</ul>
								</li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Inbox</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="mail_list.html" class="nav-link">Mail list</a></li>
										<li class="nav-item"><a href="mail_list_detached.html" class="nav-link">Mail list (detached)</a></li>
										<li class="nav-item"><a href="mail_read.html" class="nav-link">Read mail</a></li>
										<li class="nav-item"><a href="mail_write.html" class="nav-link">Write mail</a></li>
										<li class="nav-item-divider"></li>
										<li class="nav-item"><a href="chat_layouts.html" class="nav-link">Chat layouts</a></li>
										<li class="nav-item"><a href="chat_options.html" class="nav-link">Chat options</a></li>
									</ul>
								</li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Search</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="search_basic.html" class="nav-link">Basic search results</a></li>
										<li class="nav-item"><a href="search_users.html" class="nav-link">User search results</a></li>
										<li class="nav-item"><a href="search_images.html" class="nav-link">Image search results</a></li>
										<li class="nav-item"><a href="search_videos.html" class="nav-link">Video search results</a></li>
									</ul>
								</li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Job search</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="job_list_cards.html" class="nav-link">Cards view</a></li>
										<li class="nav-item"><a href="job_list_list.html" class="nav-link">List view</a></li>
										<li class="nav-item"><a href="job_detailed.html" class="nav-link">Job detailed</a></li>
										<li class="nav-item"><a href="job_apply.html" class="nav-link">Apply</a></li>
									</ul>
								</li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Learning</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="learning_list.html" class="nav-link">List view</a></li>
										<li class="nav-item"><a href="learning_grid.html" class="nav-link">Grid view</a></li>
										<li class="nav-item"><a href="learning_detailed.html" class="nav-link">Detailed course</a></li>
									</ul>
								</li>
								<li class="nav-item nav-item-submenu">
									<a href="#" class="nav-link">Ecommerce set</a>
									<ul class="nav nav-group-sub">
										<li class="nav-item"><a href="ecommerce_product_list.html" class="nav-link">Product list</a></li>
										<li class="nav-item"><a href="ecommerce_product_grid.html" class="nav-link">Product grid</a></li>
										<li class="nav-item"><a href="ecommerce_orders_history.html" class="nav-link">Orders history</a></li>
										<li class="nav-item"><a href="ecommerce_customers.html" class="nav-link">Customers</a></li>
										<li class="nav-item"><a href="ecommerce_pricing.html" class="nav-link">Pricing tables</a></li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link"><i class="icon-atom2"></i> <span>Widgets</span></a>
							<ul class="nav nav-group-sub" data-submenu-title="Widgets">
								<li class="nav-item"><a href="widgets_content.html" class="nav-link">Content widgets</a></li>
								<li class="nav-item"><a href="widgets_stats.html" class="nav-link">Statistics widgets</a></li>
								<li class="nav-item"><a href="widgets_menu.html" class="nav-link disabled">Menu widgets <span class="badge bg-transparent align-self-center ml-auto">Coming soon</span></a></li>
								<li class="nav-item"><a href="widgets_form.html" class="nav-link disabled">Form widgets <span class="badge bg-transparent align-self-center ml-auto">Coming soon</span></a></li>
							</ul>
						</li>
						<!-- /page kits -->

					</ul>
				</div>
				<!-- /main navigation -->

			</div>
			<!-- /sidebar content -->
			
		</div>
		<!-- /main sidebar -->


		<!-- Main content -->
		<div class="content-wrapper">

			<!-- Page header -->
			<div class="page-header page-header-light">
				<div class="page-header-content header-elements-md-inline">
					<div class="page-title d-flex">
						<h4><i class="icon-arrow-right6 mr-2"></i> <span class="font-weight-semibold">Horizontal Nav</span> - Mega Menu</h4>
						<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
					</div>

					<div class="header-elements d-none">
						<div class="d-flex justify-content-center">
							<a href="#" class="btn btn-link btn-float text-default"><i class="icon-bars-alt text-primary"></i><span>Statistics</span></a>
							<a href="#" class="btn btn-link btn-float text-default"><i class="icon-calculator text-primary"></i> <span>Invoices</span></a>
							<a href="#" class="btn btn-link btn-float text-default"><i class="icon-calendar5 text-primary"></i> <span>Schedule</span></a>
						</div>
					</div>
				</div>

				<div class="breadcrumb-line breadcrumb-line-light header-elements-md-inline">
					<div class="d-flex">
						<div class="breadcrumb">
							<a href="index.html" class="breadcrumb-item"><i class="icon-home2 mr-2"></i> Home</a>
							<a href="navigation_horizontal_mega.html" class="breadcrumb-item">Horizontal nav</a>
							<span class="breadcrumb-item active">Mega menu</span>
						</div>

						<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
					</div>

					<div class="header-elements d-none">
						<div class="breadcrumb justify-content-center">
							<a href="#" class="breadcrumb-elements-item">
								<i class="icon-comment-discussion mr-2"></i>
								Support
							</a>

							<div class="breadcrumb-elements-item dropdown p-0">
								<a href="#" class="breadcrumb-elements-item dropdown-toggle" data-toggle="dropdown">
									<i class="icon-gear mr-2"></i>
									Settings
								</a>

								<div class="dropdown-menu dropdown-menu-right">
									<a href="#" class="dropdown-item"><i class="icon-user-lock"></i> Account security</a>
									<a href="#" class="dropdown-item"><i class="icon-statistics"></i> Analytics</a>
									<a href="#" class="dropdown-item"><i class="icon-accessibility"></i> Accessibility</a>
									<div class="dropdown-divider"></div>
									<a href="#" class="dropdown-item"><i class="icon-gear"></i> All settings</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- /page header -->


			<!-- Content area -->
			<div class="content">

				<!-- Nav lists -->
				<div class="card">
					<div class="card-header header-elements-inline">
						<h5 class="card-title">Nav lists</h5>
						<div class="header-elements">
							<div class="list-icons">
		                		<a class="list-icons-item" data-action="collapse"></a>
		                		<a class="list-icons-item" data-action="reload"></a>
		                		<a class="list-icons-item" data-action="remove"></a>
		                	</div>
	                	</div>
					</div>

					<div class="card-body">
						<p class="mb-3">Dropdown menu markup can be used in 12 columns grid, aligned to the left and right, and have single or multiple levels. Nested levels in multi column nav list use custom extension that saves currently opened level in cookies and shows a link to parent level. Inner dropdowns support all available elements: badges, checkboxes, radios, headers, dividers etc. Please note - mega dropdown menu uses custom class names along with default ones and all these classes are required for a correct functioning.</p>

						<p class="font-weight-semibold">Examples:</p>
						<div class="navbar navbar-expand-xl navbar-dark bg-info-700 navbar-component rounded mb-1">
							<div class="navbar-brand">
								<a href="index.html" class="d-inline-block">
									<img src="../../../../global_assets/images/logo_light.png" alt="">
								</a>
							</div>

							<div class="d-xl-none">
								<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-nav-lists">
									<i class="icon-menu"></i>
								</button>
							</div>

							<div class="navbar-collapse collapse" id="navbar-nav-lists">
								<ul class="navbar-nav">
									<li class="nav-item mega-menu-left">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Multi columns menu</a>

										<div class="dropdown-menu dropdown-content w-xl-50">
											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-xl-4">
														<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase mt-1">Form components</div>
														<div class="dropdown-divider mb-2"></div>
														<div class="mb-3 mb-xl-0">
															<a href="form_inputs.html" class="dropdown-item rounded">Basic inputs</a>
															<a href="form_controls_extended.html" class="dropdown-item rounded">Extended controls</a>
															<a href="form_select2.html" class="dropdown-item rounded">Select2 selects</a>
															<a href="form_validation.html" class="dropdown-item rounded">Validation</a>
														</div>
													</div>
													<div class="col-xl-4">
														<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase mt-1">UI components</div>
														<div class="dropdown-divider mb-2"></div>
														<div class="mb-3 mb-xl-0">
															<a href="components_modals.html" class="dropdown-item rounded">Modals <span class="badge badge-pill bg-grey ml-auto">10+</span></a>
															<a href="components_dropdowns.html" class="dropdown-item rounded">Dropdown menus</a>
															<a href="components_buttons.html" class="dropdown-item rounded">Buttons</a>
															<a href="components_tabs.html" class="dropdown-item rounded">Tabs component</a>
														</div>
													</div>
													<div class="col-xl-4">
														<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase mt-1">Navigation</div>
														<div class="dropdown-divider mb-2"></div>
														<div class="mb-3 mb-xl-0">
															<a href="navigation_horizontal_hover.html" class="dropdown-item rounded">Submenu on hover</a>
															<a href="navigation_horizontal_elements.html" class="dropdown-item rounded">With custom elements</a>
															<a href="navigation_horizontal_tabs.html" class="dropdown-item rounded">Tabbed navigation</a>
															<a href="navigation_horizontal_mega.html" class="dropdown-item rounded active">Horizontal mega menu</a>
														</div>
													</div>
												</div>
											</div>
										</div>
									</li>

									<li class="nav-item mega-menu-full">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Grid list</a>

										<div class="dropdown-menu dropdown-content">
											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-xl-2">
														<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase mt-1">Form components</div>
														<div class="dropdown-divider mb-2"></div>
														<div class="mb-3 mb-xl-0">
															<a href="form_inputs.html" class="dropdown-item rounded">Basic inputs</a>
															<a href="form_controls_extended.html" class="dropdown-item rounded">Extended controls</a>
															<a href="form_select2.html" class="dropdown-item rounded">Select2 selects</a>
															<a href="form_floating_labels.html" class="dropdown-item rounded">Floating labels</a>
															<a href="form_validation.html" class="dropdown-item rounded">Validation</a>
														</div>
													</div>
													<div class="col-xl-2">
														<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase mt-1">UI components</div>
														<div class="dropdown-divider mb-2"></div>
														<div class="mb-3 mb-xl-0">
															<a href="components_modals.html" class="dropdown-item rounded">Modals <span class="badge badge-pill bg-grey ml-auto">10+</span></a>
															<a href="components_dropdowns.html" class="dropdown-item rounded">Dropdown menus</a>
															<a href="components_buttons.html" class="dropdown-item rounded">Buttons</a>
															<a href="components_tabs.html" class="dropdown-item rounded">Tabs component</a>
															<a href="components_breadcrumbs.html" class="dropdown-item rounded">Breadcrumbs</a>
														</div>
													</div>
													<div class="col-xl-2">
														<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase mt-1">Sidebars</div>
														<div class="dropdown-divider mb-2"></div>
														<div class="mb-3 mb-xl-0">
															<a href="sidebar_default_collapse.html" class="dropdown-item rounded">Main sidebar</a>
															<a href="sidebar_secondary_after.html" class="dropdown-item rounded">Secondary sidebar</a>
															<a href="sidebar_right_default_collapse.html" class="dropdown-item rounded">Right sidebar</a>
															<a href="sidebar_content_left.html" class="dropdown-item rounded">Content sidebar</a>
															<a href="sidebar_components.html" class="dropdown-item rounded">Sidebar components</a>
														</div>
													</div>
													<div class="col-xl-2">
														<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase mt-1">Navigation</div>
														<div class="dropdown-divider mb-2"></div>
														<div class="mb-3 mb-xl-0">
															<a href="navigation_horizontal_click.html" class="dropdown-item rounded">Submenu on click</a>
															<a href="navigation_horizontal_hover.html" class="dropdown-item rounded">Submenu on hover</a>
															<a href="navigation_horizontal_elements.html" class="dropdown-item rounded">With custom elements</a>
															<a href="navigation_horizontal_tabs.html" class="dropdown-item rounded">Tabbed navigation</a>
															<a href="navigation_horizontal_mega.html" class="dropdown-item rounded active">Horizontal mega menu</a>
														</div>
													</div>
													<div class="col-xl-2">
														<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase mt-1">Navbars</div>
														<div class="dropdown-divider mb-2"></div>
														<div class="mb-3 mb-xl-0">
															<a href="navbar_single_top_static.html" class="dropdown-item rounded">Single navbar</a>
															<a href="navbar_multiple_top_static.html" class="dropdown-item rounded">Multiple navbars</a>
															<a href="navbar_colors.html" class="dropdown-item rounded">Color options</a>
															<a href="navbar_hideable.html" class="dropdown-item rounded">Hide on scroll</a>
															<a href="navbar_components.html" class="dropdown-item rounded">Navbar components</a>
														</div>
													</div>
													<div class="col-xl-2">
														<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase mt-1">Extensions</div>
														<div class="dropdown-divider mb-2"></div>
														<div class="mb-0">
															<a href="jqueryui_interactions.html" class="dropdown-item rounded">jQuery UI</a>
															<a href="animations_velocity_basic.html" class="dropdown-item rounded">Animations <span class="badge badge-pill badge-info ml-auto">14</span></a>
															<a href="uploader_plupload.html" class="dropdown-item rounded">File uploaders</a>
															<a href="extension_image_cropper.html" class="dropdown-item rounded">Image cropper</a>
															<a href="fullcalendar_views.html" class="dropdown-item rounded">Calendars</a>
														</div>
													</div>
												</div>
											</div>
										</div>
									</li>

									<li class="nav-item nav-item-multi mega-menu-full">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Multi level grid list</a>

										<div class="dropdown-menu dropdown-content">
											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-xl-3">
														<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase mt-1">Components</div>
														<div class="dropdown-divider mb-2"></div>
														<div class="dropdown-item-group mb-3 mb-xl-0">
															<ul class="list-unstyled">
																<li>
																	<a href="#" class="dropdown-item rounded"><i class="icon-pencil7"></i> Form components</a>
																	<ul class="list-unstyled">
																		<li><a href="form_inputs.html" class="dropdown-item rounded">Basic inputs</a></li>
																		<li><a href="form_checkboxes_radios.html" class="dropdown-item rounded">Checkboxes &amp; radios</a></li>
																		<li><a href="form_select2.html" class="dropdown-item rounded">Select2 selects</a></li>
																		<li><a href="form_bootstrap_select.html" class="dropdown-item rounded">Bootstrap select</a></li>
																		<li><a href="form_multiselect.html" class="dropdown-item rounded">Bootstrap multiselect</a></li>
																		<li><a href="form_input_groups.html" class="dropdown-item rounded">Input groups</a></li>
																		<li><a href="form_controls_extended.html" class="dropdown-item rounded">Extended controls</a></li>
																		<li><a href="form_floating_labels.html" class="dropdown-item rounded">Floating labels</a></li>
																		<li><a href="form_tag_inputs.html" class="dropdown-item rounded">Tag inputs</a></li>
																		<li><a href="form_dual_listboxes.html" class="dropdown-item rounded">Dual Listboxes</a></li>
																		<li><a href="form_validation.html" class="dropdown-item rounded">Validation</a></li>
																		<li><a href="form_wizard.html" class="dropdown-item rounded">Form wizard</a></li>
																		<li><a href="form_actions.html" class="dropdown-item rounded">Form actions</a></li>
																		<li><a href="form_inputs_grid.html" class="dropdown-item rounded">Inputs grid</a></li>
																	</ul>
																</li>
																<li>
																	<a href="#" class="dropdown-item rounded"><i class="icon-grid"></i> UI components</a>
																	<ul class="list-unstyled">
																		<li><a href="components_modals.html" class="dropdown-item rounded">Modals</a></li>
																		<li><a href="components_dropdowns.html" class="dropdown-item rounded">Dropdown menus</a></li>
																		<li><a href="components_tabs.html" class="dropdown-item rounded">Tabs component</a></li>
																		<li><a href="components_pills.html" class="dropdown-item rounded">Pills component</a></li>
																		<li><a href="components_collapsible.html" class="dropdown-item rounded">Collapsible</a></li>
																		<li><a href="components_navs.html" class="dropdown-item rounded">Navs</a></li>
																		<li><a href="components_buttons.html" class="dropdown-item rounded">Buttons</a></li>
																		<li><a href="components_popups.html" class="dropdown-item rounded">Tooltips and popovers</a></li>
																		<li><a href="components_alerts.html" class="dropdown-item rounded">Alerts</a></li>
																		<li><a href="components_pagination.html" class="dropdown-item rounded">Pagination</a></li>
																		<li><a href="components_badges.html" class="dropdown-item rounded">Badges</a></li>
																		<li><a href="components_progress.html" class="dropdown-item rounded">Progress</a></li>
																		<li><a href="components_breadcrumbs.html" class="dropdown-item rounded">Breadcrumbs</a></li>
																		<li><a href="components_media.html" class="dropdown-item rounded">Media objects</a></li>
																		<li><a href="components_scrollspy.html" class="dropdown-item rounded">Scrollspy</a></li>
																	</ul>
																</li>
																<li>
																	<a href="#" class="dropdown-item rounded"><i class="icon-gift"></i> Extra components</a>
																	<ul class="list-unstyled">
																		<li><a href="extra_pnotify.html" class="dropdown-item rounded">PNotify notifications</a></li>
																		<li><a href="extra_jgrowl_noty.html" class="dropdown-item rounded">jGrowl and Noty notifications</a></li>
																		<li><a href="extra_sweetalert.html" class="dropdown-item rounded">SweetAlert notifications</a></li>
																		<li><a href="extra_sliders_ion.html" class="dropdown-item rounded">Ion range sliders</a></li>
																		<li><a href="extra_trees.html" class="dropdown-item rounded">Dynamic tree views</a></li>
																		<li><a href="extra_context_menu.html" class="dropdown-item rounded">Context menu</a></li>
																		<li><a href="extra_fab.html" class="dropdown-item rounded">Floating action buttons</a></li>
																		<li><a href="extra_session_timeout.html" class="dropdown-item rounded">Session timeout</a></li>
																		<li><a href="extra_idle_timeout.html" class="dropdown-item rounded">Idle timeout</a></li>
																	</ul>
																</li>
															</ul>
														</div>
													</div>
													<div class="col-xl-3">
														<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase mt-1">Layout</div>
														<div class="dropdown-divider mb-2"></div>
														<div class="dropdown-item-group mb-3 mb-xl-0">
															<ul class="list-unstyled">
																<li>
																	<a href="#" class="dropdown-item rounded"><i class="icon-indent-decrease2"></i> Sidebars</a>
																	<ul class="list-unstyled">
																		<li>
																			<a href="#" class="dropdown-item rounded">Main sidebar</a>
																			<ul class="list-unstyled">
																				<li><a href="sidebar_default_collapse.html" class="dropdown-item rounded">Default collapsible</a></li>
																				<li><a href="sidebar_default_hide.html" class="dropdown-item rounded">Default hideable</a></li>
																				<li><a href="sidebar_default_hidden.html" class="dropdown-item rounded">Default hidden</a></li>
																				<li><a href="sidebar_mini_collapse.html" class="dropdown-item rounded">Mini collapsible</a></li>
																				<li><a href="sidebar_mini_hide.html" class="dropdown-item rounded">Mini hideable</a></li>
																				<li><a href="sidebar_mini_hidden.html" class="dropdown-item rounded">Mini hidden</a></li>
																			</ul>
																		</li>
																		<li>
																			<a href="#" class="dropdown-item rounded">Secondary sidebar</a>
																			<ul class="list-unstyled">
																				<li><a href="sidebar_secondary_after.html" class="dropdown-item rounded">After default</a></li>
																				<li><a href="sidebar_secondary_before.html" class="dropdown-item rounded">Before default</a></li>
																				<li><a href="sidebar_secondary_hidden.html" class="dropdown-item rounded">Hidden by default</a></li>
																			</ul>
																		</li>
																		<li>
																			<a href="#" class="dropdown-item rounded">Right sidebar</a>
																			<ul class="list-unstyled">
																				<li><a href="sidebar_right_default_collapse.html" class="dropdown-item rounded">Show - collapse main</a></li>
																				<li><a href="sidebar_right_default_hide.html" class="dropdown-item rounded">Show - hide main</a></li>
																				<li><a href="sidebar_right_default_toggle.html" class="dropdown-item rounded">Show - fix default width</a></li>
																				<li><a href="sidebar_right_mini_toggle.html" class="dropdown-item rounded">Show - fix mini width</a></li>
																				<li><a href="sidebar_right_secondary_hide.html" class="dropdown-item rounded">Show - hide secondary</a></li>
																				<li><a href="sidebar_right_visible.html" class="dropdown-item rounded">Visible by default</a></li>
																			</ul>
																		</li>
																		<li>
																			<a href="#" class="dropdown-item rounded">Content sidebar</a>
																			<ul class="list-unstyled">
																				<li><a href="sidebar_content_left.html" class="dropdown-item rounded">Left position</a></li>
																				<li><a href="sidebar_content_left_stretch.html" class="dropdown-item rounded">Left stretched</a></li>
																				<li><a href="sidebar_content_left_hidden.html" class="dropdown-item rounded">Left hidden</a></li>
																				<li><a href="sidebar_content_right.html" class="dropdown-item rounded">Right position</a></li>
																				<li><a href="sidebar_content_right_stretch.html" class="dropdown-item rounded">Right stretched</a></li>
																				<li><a href="sidebar_content_right_hidden.html" class="dropdown-item rounded">Right hidden</a></li>
																				<li><a href="sidebar_content_sections.html" class="dropdown-item rounded">Sectioned sidebar</a></li>
																			</ul>
																		</li>
																	</ul>
																</li>
																<li>
																	<a href="#" class="dropdown-item rounded"><i class="icon-sort"></i> Vertical navigation</a>
																	<ul class="list-unstyled">
																		<li><a href="navigation_vertical_collapsible.html" class="dropdown-item rounded">Collapsible menu</a></li>
																		<li><a href="navigation_vertical_accordion.html" class="dropdown-item rounded">Accordion menu</a></li>
																		<li><a href="navigation_vertical_bordered.html" class="dropdown-item rounded">Bordered navigation</a></li>
																		<li><a href="navigation_vertical_right_icons.html" class="dropdown-item rounded">Right icons</a></li>
																		<li><a href="navigation_vertical_badges.html" class="dropdown-item rounded">Badges</a></li>
																		<li><a href="navigation_vertical_disabled.html" class="dropdown-item rounded">Disabled items</a></li>
																	</ul>
																</li>
																<li>
																	<a href="#" class="dropdown-item rounded"><i class="icon-transmission"></i> Horizontal navigation</a>
																	<ul class="list-unstyled">
																		<li><a href="navigation_horizontal_hover.html" class="dropdown-item rounded">Submenu on hover</a></li>
																		<li><a href="navigation_horizontal_elements.html" class="dropdown-item rounded">With custom elements</a></li>
																		<li><a href="navigation_horizontal_mega.html" class="dropdown-item rounded active">Horizontal mega menu</a></li>
																	</ul>
																</li>
															</ul>
														</div>
													</div>
													<div class="col-xl-3">
														<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase mt-1">Data visualization</div>
														<div class="dropdown-divider mb-2"></div>
														<div class="dropdown-item-group mb-3 mb-xl-0">
															<ul class="list-unstyled">
																<li>
																	<a href="#" class="dropdown-item rounded"><i class="icon-graph"></i> ECharts library</a>
																	<ul class="list-unstyled">
																		<li><a href="echarts_lines_areas.html" class="dropdown-item rounded">Lines and areas</a></li>
																		<li><a href="echarts_columns_waterfalls.html" class="dropdown-item rounded">Columns and waterfalls</a></li>
																		<li><a href="echarts_bars_tornados.html" class="dropdown-item rounded">Bars and tornados</a></li>
																		<li><a href="echarts_scatter.html" class="dropdown-item rounded">Scatter charts</a></li>
																		<li><a href="echarts_pies_donuts.html" class="dropdown-item rounded">Pies and donuts</a></li>
																		<li><a href="echarts_funnels_calendars.html" class="dropdown-item rounded">Funnels and calendars</a></li>
																		<li><a href="echarts_candlesticks_others.html" class="dropdown-item rounded">Candlesticks and others</a></li>
																		<li><a href="echarts_combinations.html" class="dropdown-item rounded">Chart combinations</a></li>
																	</ul>
																</li>
																<li>
																	<a href="#" class="dropdown-item rounded"><i class="icon-statistics"></i> D3 library</a>
																	<ul class="list-unstyled">
																		<li><a href="d3_lines_basic.html" class="dropdown-item rounded">Simple lines</a></li>
																		<li><a href="d3_lines_advanced.html" class="dropdown-item rounded">Advanced lines</a></li>
																		<li><a href="d3_bars_basic.html" class="dropdown-item rounded">Simple bars</a></li>
																		<li><a href="d3_bars_advanced.html" class="dropdown-item rounded">Advanced bars</a></li>
																		<li><a href="d3_pies.html" class="dropdown-item rounded">Pie charts</a></li>
																		<li><a href="d3_circle_diagrams.html" class="dropdown-item rounded">Circle diagrams</a></li>
																		<li><a href="d3_tree.html" class="dropdown-item rounded">Tree layout</a></li>
																		<li><a href="d3_other.html" class="dropdown-item rounded">Other charts</a></li>
																	</ul>
																</li>
																<li>
																	<a href="#" class="dropdown-item rounded"><i class="icon-google"></i> Google charts</a>
																	<ul class="list-unstyled">
																		<li><a href="google_lines.html" class="dropdown-item rounded">Line charts</a></li>
																		<li><a href="google_bars.html" class="dropdown-item rounded">Bar charts</a></li>
																		<li><a href="google_pies.html" class="dropdown-item rounded">Pie charts</a></li>
																		<li><a href="google_scatter_bubble.html" class="dropdown-item rounded">Bubble &amp; scatter charts</a></li>
																		<li><a href="google_other.html" class="dropdown-item rounded">Other charts</a></li>
																	</ul>
																</li>
															</ul>
														</div>
													</div>
													<div class="col-xl-3">
														<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase mt-1">Extras</div>
														<div class="dropdown-divider mb-2"></div>
														<div class="dropdown-item-group mb-3 mb-xl-0">
															<ul class="list-unstyled">
																<li>
																	<a href="#" class="dropdown-item rounded"><i class="icon-puzzle4"></i> Extensions</a>
																	<ul class="list-unstyled">
																		<li><a href="extension_image_cropper.html" class="dropdown-item rounded">Image cropper</a></li>
																		<li><a href="extension_blockui.html" class="dropdown-item rounded">Block UI</a></li>
																		<li><a href="extension_dnd.html" class="dropdown-item rounded">Drag and drop</a></li>
																	</ul>
																</li>
																<li>
																	<a href="#" class="dropdown-item rounded"><i class="icon-popout"></i> jQuery UI</a>
																	<ul class="list-unstyled">
																		<li><a href="jqueryui_interactions.html" class="dropdown-item rounded">Interactions</a></li>
																		<li><a href="jqueryui_forms.html" class="dropdown-item rounded">Forms</a></li>
																		<li><a href="jqueryui_components.html" class="dropdown-item rounded">Components</a></li>
																		<li><a href="jqueryui_sliders.html" class="dropdown-item rounded">Sliders</a></li>
																		<li><a href="jqueryui_navigation.html" class="dropdown-item rounded">Navigation</a></li>
																	</ul>
																</li>
																<li>
																	<a href="#" class="dropdown-item rounded"><i class="icon-calendar3"></i> Event calendars</a>
																	<ul class="list-unstyled">
																		<li><a href="fullcalendar_views.html" class="dropdown-item rounded">Basic views</a></li>
																		<li><a href="fullcalendar_styling.html" class="dropdown-item rounded">Event styling</a></li>
																		<li><a href="fullcalendar_formats.html" class="dropdown-item rounded">Language and time</a></li>
																		<li><a href="fullcalendar_advanced.html" class="dropdown-item rounded">Advanced usage</a></li>
																	</ul>
																</li>
															</ul>
														</div>
													</div>
												</div>
											</div>
										</div>
									</li>

									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Right multi level menu</a>

										<div class="dropdown-menu">
											<a href="#" class="dropdown-item"><i class="icon-IE"></i> Second level</a>
											<div class="dropdown-submenu">
												<a href="#" class="dropdown-item dropdown-toggle"><i class="icon-firefox"></i> Has child</a>
												<div class="dropdown-menu">
													<a href="#" class="dropdown-item"><i class="icon-android"></i> Third level</a>
													<div class="dropdown-submenu">
														<a href="#" class="dropdown-item dropdown-toggle"><i class="icon-apple2"></i> Has child</a>
														<div class="dropdown-menu">
															<a href="#" class="dropdown-item"><i class="icon-html5"></i> Fourth level</a>
															<a href="#" class="dropdown-item"><i class="icon-css3"></i> Fourth level</a>
														</div>
													</div>
													<a href="#" class="dropdown-item"><i class="icon-windows"></i> Third level</a>
												</div>
											</div>
											<a href="#" class="dropdown-item"><i class="icon-chrome"></i> Second level</a>
										</div>
									</li>
								</ul>

								<ul class="navbar-nav ml-xl-auto">
									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Left multi level menu</a>

										<div class="dropdown-menu dropdown-menu-right">
											<a href="#" class="dropdown-item"><i class="icon-firefox"></i> Second level</a>
											<div class="dropdown-submenu dropdown-submenu-left">
												<a href="#" class="dropdown-item dropdown-toggle"><i class="icon-chrome"></i> Has child</a>
												<div class="dropdown-menu">
													<a href="#" class="dropdown-item"><i class="icon-android"></i> Third level</a>
													<div class="dropdown-submenu dropdown-submenu-left">
														<a href="#" class="dropdown-item dropdown-toggle"><i class="icon-apple2"></i> Has child</a>
														<div class="dropdown-menu">
															<a href="#" class="dropdown-item"><i class="icon-html5"></i> Fourth level</a>
															<a href="#" class="dropdown-item"><i class="icon-css3"></i> Fourth level</a>
														</div>
													</div>
													<a href="#" class="dropdown-item"><i class="icon-windows"></i> Third level</a>
												</div>
											</div>
											<a href="#" class="dropdown-item"><i class="icon-IE"></i> Second level</a>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- /nav lists -->


				<!-- Content lists -->
				<div class="card">
					<div class="card-header header-elements-inline">
						<h5 class="card-title">Content lists</h5>
						<div class="header-elements">
							<div class="list-icons">
		                		<a class="list-icons-item" data-action="collapse"></a>
		                		<a class="list-icons-item" data-action="reload"></a>
		                		<a class="list-icons-item" data-action="remove"></a>
		                	</div>
	                	</div>
					</div>

					<div class="card-body">
						<p class="mb-3">Besides simple navigation lists, dropdown menu can contain more complex lists of content: horizontal and vertical buttons list, all types of media lists, progresses, language selection etc etc. Just use standard content lists markup, custom mega menu markup and adjust menu width accordingly. For long lists, add <code>.dropdown-scrollable</code> class to <code>.dropdown-body</code> container to limit height to <code>340px</code> and make the content scrollable. You can also use color utility classes to change menu color, but bear in mind that some elements require color adjustments in this case.</p>

						<p class="font-weight-semibold">Examples:</p>
						<div class="navbar navbar-expand-xl navbar-dark bg-info-700 navbar-component rounded mb-1">
							<div class="navbar-brand">
								<a href="index.html" class="d-inline-block">
									<img src="../../../../global_assets/images/logo_light.png" alt="">
								</a>
							</div>

							<div class="d-xl-none">
								<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-content-lists">
									<i class="icon-menu"></i>
								</button>
							</div>

							<div class="navbar-collapse collapse" id="navbar-content-lists">
								<ul class="navbar-nav">
									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Media list</a>
										
										<div class="dropdown-menu dropdown-content wmin-xl-300">
											<div class="dropdown-content-header">
												<span class="font-weight-semibold">Media list</span>
												<a href="#" class="text-default"><i class="icon-search4 font-size-base"></i></a>
											</div>

											<div class="dropdown-content-body dropdown-scrollable">
												<ul class="media-list">
													<li class="media">
														<div class="mr-3">
															<img src="../../../../global_assets/images/demo/users/face18.jpg" width="36" height="36" class="rounded-circle" alt="">
														</div>
														<div class="media-body">
															<a href="#" class="media-title font-weight-semibold">Jordana Ansley</a>
															<span class="d-block text-muted font-size-sm">Lead web developer</span>
														</div>
														<div class="ml-3 align-self-center"><span class="badge badge-mark border-success"></span></div>
													</li>

													<li class="media">
														<div class="mr-3">
															<img src="../../../../global_assets/images/demo/users/face24.jpg" width="36" height="36" class="rounded-circle" alt="">
														</div>
														<div class="media-body">
															<a href="#" class="media-title font-weight-semibold">Will Brason</a>
															<span class="d-block text-muted font-size-sm">Marketing manager</span>
														</div>
														<div class="ml-3 align-self-center"><span class="badge badge-mark border-danger"></span></div>
													</li>

													<li class="media">
														<div class="mr-3">
															<img src="../../../../global_assets/images/demo/users/face17.jpg" width="36" height="36" class="rounded-circle" alt="">
														</div>
														<div class="media-body">
															<a href="#" class="media-title font-weight-semibold">Hanna Walden</a>
															<span class="d-block text-muted font-size-sm">Project manager</span>
														</div>
														<div class="ml-3 align-self-center"><span class="badge badge-mark border-success"></span></div>
													</li>

													<li class="media">
														<div class="mr-3">
															<img src="../../../../global_assets/images/demo/users/face19.jpg" width="36" height="36" class="rounded-circle" alt="">
														</div>
														<div class="media-body">
															<a href="#" class="media-title font-weight-semibold">Dori Laperriere</a>
															<span class="d-block text-muted font-size-sm">Business developer</span>
														</div>
														<div class="ml-3 align-self-center"><span class="badge badge-mark border-warning-300"></span></div>
													</li>

													<li class="media">
														<div class="mr-3">
															<img src="../../../../global_assets/images/demo/users/face16.jpg" width="36" height="36" class="rounded-circle" alt="">
														</div>
														<div class="media-body">
															<a href="#" class="media-title font-weight-semibold">Vanessa Aurelius</a>
															<span class="d-block text-muted font-size-sm">UX expert</span>
														</div>
														<div class="ml-3 align-self-center"><span class="badge badge-mark border-grey-400"></span></div>
													</li>
												</ul>
											</div>
										</div>
									</li>

									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Linked media list</a>
										
										<div class="dropdown-menu dropdown-content wmin-xl-350">
											<div class="dropdown-content-header bg-transparent">
												<span class="font-weight-semibold">Linked list</span>
												<a href="#" class="text-default"><i class="icon-search4 font-size-base"></i></a>
											</div>

											<div class="dropdown-divider m-0"></div>

											<div class="dropdown-content-body dropdown-scrollable p-0">
												<ul class="media-list media-list-linked">
													<li>
														<a href="#" class="media">
															<div class="mr-3">
																<img src="../../../../global_assets/images/demo/users/face10.jpg" class="rounded-circle" width="36" height="36" alt="">
															</div>

															<div class="media-body">
																<div class="media-title d-flex">
																	<span class="font-weight-semibold">James Alexander</span>
																	<span class="ml-auto text-muted font-size-sm line-height-sm">04:58</span>
																</div>

																Who knows, maybe that would be the best thing for me...
															</div>
														</a>
													</li>

													<li>
														<a href="#" class="media">
															<div class="mr-3">
																<img src="../../../../global_assets/images/demo/users/face3.jpg" class="rounded-circle" width="36" height="36" alt="">
															</div>

															<div class="media-body">
																<div class="media-title d-flex">
																	<span class="font-weight-semibold">Margo Baker</span>
																	<span class="ml-auto text-muted font-size-sm line-height-sm">12:16</span>
																</div>

																That was something he was unable to do because...
															</div>
														</a>
													</li>

													<li>
														<a href="#" class="media">
															<div class="mr-3">
																<img src="../../../../global_assets/images/demo/users/face24.jpg" class="rounded-circle" width="36" height="36" alt="">
															</div>

															<div class="media-body">
																<div class="media-title d-flex">
																	<span class="font-weight-semibold">Jeremy Victorino</span>
																	<span class="ml-auto text-muted font-size-sm line-height-sm">22:48</span>
																</div>

																But that would be extremely strained and suspicious...
															</div>
														</a>
													</li>

													<li>
														<a href="#" class="media">
															<div class="mr-3">
																<img src="../../../../global_assets/images/demo/users/face4.jpg" class="rounded-circle" width="36" height="36" alt="">
															</div>

															<div class="media-body">
																<div class="media-title d-flex">
																	<span class="font-weight-semibold">Beatrix Diaz</span>
																	<span class="ml-auto text-muted font-size-sm line-height-sm">Tue</span>
																</div>

																What a strenuous career it is that I've chosen...
															</div>
														</a>
													</li>

													<li>
														<a href="#" class="media">
															<div class="mr-3">
																<img src="../../../../global_assets/images/demo/users/face25.jpg" class="rounded-circle" width="36" height="36" alt="">
															</div>

															<div class="media-body">
																<div class="media-title d-flex">
																	<span class="font-weight-semibold">Richard Vango</span>
																	<span class="ml-auto text-muted font-size-sm line-height-sm">Mon</span>
																</div>

																Other travelling salesmen live a life of luxury...
															</div>
														</a>
													</li>
												</ul>
											</div>
										</div>
									</li>

									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Progress list</a>
										
										<div class="dropdown-menu dropdown-content wmin-xl-300">
											<div class="dropdown-content-header">
												<span class="font-weight-semibold">Progress bars</span>
												<a href="#" class="text-default"><i class="icon-gear"></i></a>
											</div>

											<div class="dropdown-content-body dropdown-scrollable">
												<ul class="list-unstyled mb-0">
										            <li class="mb-3">
										                <div class="d-flex align-items-center mb-1">CPU usage <span class="text-muted ml-auto">50%</span></div>
														<div class="progress" style="height: 0.125rem;">
															<div class="progress-bar bg-info" style="width: 50%">
																<span class="sr-only">50% Complete</span>
															</div>
														</div>
										            </li>

										            <li class="mb-3">
										                <div class="d-flex align-items-center mb-1">RAM usage <span class="text-muted ml-auto">70%</span></div>
														<div class="progress" style="height: 0.125rem;">
															<div class="progress-bar bg-danger" style="width: 70%">
																<span class="sr-only">70% Complete</span>
															</div>
														</div>
										            </li>

										            <li class="mb-3">
										                <div class="d-flex align-items-center mb-1">Disc space <span class="text-muted ml-auto">80%</span></div>
														<div class="progress" style="height: 0.125rem;">
															<div class="progress-bar bg-success" style="width: 80%">
																<span class="sr-only">80% Complete</span>
															</div>
														</div>
										            </li>

										            <li>
										                <div class="d-flex align-items-center mb-1">Bandwidth <span class="text-muted ml-auto">60%</span></div>
														<div class="progress" style="height: 0.125rem;">
															<div class="progress-bar bg-primary" style="width: 60%">
																<span class="sr-only">60% Complete</span>
															</div>
														</div>
										            </li>
										        </ul>
											</div>
										</div>
									</li>

									<li class="nav-item mega-menu-left">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Link tiles</a>

										<div class="dropdown-menu dropdown-content wmin-xl-350">
											<div class="dropdown-content-header bg-dark">
												<span class="font-weight-semibold">Link tiles</span>
												<a href="#" class="text-white"><i class="icon-gear"></i></a>
											</div>

											<div class="dropdown-divider m-0"></div>

											<div class="dropdown-content-body p-1">
												<div class="row no-gutters">
													<div class="col-12 col-sm-4">
														<a href="#" class="d-block text-default text-center p-2 my-2">
															<i class="icon-github4 icon-2x"></i>
															<div class="mt-2">Github</div>
														</a>

														<a href="#" class="d-block text-default text-center p-2 my-2">
															<i class="icon-dropbox text-blue-400 icon-2x"></i>
															<div class="mt-2">Dropbox</div>
														</a>
													</div>
													
													<div class="col-12 col-sm-4">
														<a href="#" class="d-block text-default text-center p-2 my-2">
															<i class="icon-dribbble3 text-pink-400 icon-2x"></i>
															<div class="mt-2">Dribbble</div>
														</a>

														<a href="#" class="d-block text-default text-center p-2 my-2">
															<i class="icon-google-drive text-success-400 icon-2x"></i>
															<div class="mt-2">Drive</div>
														</a>
													</div>

													<div class="col-12 col-sm-4">
														<a href="#" class="d-block text-default text-center p-2 my-2">
															<i class="icon-twitter text-info-400 icon-2x"></i>
															<div class="mt-2">Twitter</div>
														</a>

														<a href="#" class="d-block text-default text-center p-2 my-2">
															<i class="icon-youtube text-danger icon-2x"></i>
															<div class="mt-2">Youtube</div>
														</a>
													</div>
												</div>
											</div>
										</div>
									</li>
								</ul>

								<ul class="navbar-nav ml-xl-auto">
									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">
											<img src="../../../../global_assets/images/lang/es.png" class="img-flag mr-2" alt="">
											Languages
										</a>

										<div class="dropdown-menu dropdown-menu-right">
											<a href="#" class="dropdown-item english"><img src="../../../../global_assets/images/lang/gb.png" class="img-flag" alt=""> English</a>
											<a href="#" class="dropdown-item ukrainian"><img src="../../../../global_assets/images/lang/ua.png" class="img-flag" alt=""> Українська</a>
											<a href="#" class="dropdown-item deutsch"><img src="../../../../global_assets/images/lang/de.png" class="img-flag" alt=""> Deutsch</a>
											<a href="#" class="dropdown-item active espana"><img src="../../../../global_assets/images/lang/es.png" class="img-flag" alt=""> España</a>
											<a href="#" class="dropdown-item russian"><img src="../../../../global_assets/images/lang/ru.png" class="img-flag" alt=""> Русский</a>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- /content lists -->


				<!-- Content component -->
				<div class="card">
					<div class="card-header header-elements-inline">
						<h5 class="card-title">Content components</h5>
						<div class="header-elements">
							<div class="list-icons">
		                		<a class="list-icons-item" data-action="collapse"></a>
		                		<a class="list-icons-item" data-action="reload"></a>
		                		<a class="list-icons-item" data-action="remove"></a>
		                	</div>
	                	</div>
					</div>

					<div class="card-body">
						<p class="mb-3">Besides navigation, mega dropdown menu can also contain <strong>all</strong> available components: forms, buttons, cards, 3rd party extensions, tables, images, videos etc. The only one exception is nested dropdowns with <code>data-toggle="dropdown"</code> attibute due to default BS limitation. If menu doesn't have 100% width, in some cases you would need to set minimum width by using <code>sizing</code> utility classes, because most of the components are fluid by default and their width depends on parent container width. All components are adapted for mobile browsers.</p>

						<p class="font-weight-semibold">Examples:</p>
						<div class="navbar navbar-expand-xl navbar-dark bg-info-700 navbar-component rounded mb-1">
							<div class="navbar-brand">
								<a href="index.html" class="d-inline-block">
									<img src="../../../../global_assets/images/logo_light.png" alt="">
								</a>
							</div>

							<div class="d-xl-none">
								<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-content-components">
									<i class="icon-menu"></i>
								</button>
							</div>

							<div class="navbar-collapse collapse" id="navbar-content-components">
								<ul class="navbar-nav">
									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Table</a>
										<div class="dropdown-menu dropdown-content">
											<div class="dropdown-content-header">
												<div class="dropdown-header font-weight-semibold text-uppercase text-default p-0 m-0">Table example</div>
												<a href="#" class="text-default"><i class="icon-menu6"></i></a>
											</div>

											<div class="table-responsive wmin-600">
												<table class="table table-sm">
													<thead>
														<tr>
															<th>Description</th>
															<th>Category</th>
															<th>Assigned to</th>
															<th class="text-center">Progress</th>
														</tr>
													</thead>
													<tbody>
														<tr>
															<td><a href="#">Frontpage fixes</a></td>
															<td>Bugs</td>
															<td>
																<a href="#">
																	<img src="../../../../global_assets/images/demo/users/face1.jpg" class="rounded-circle" width="32" height="32" alt="">
																</a>
															</td>
															<td class="text-center"><span class="badge badge-pill bg-success">87%</span></td>
														</tr>
														<tr>
															<td><a href="#">CSS compilation</a></td>
															<td>Bugs</td>
															<td>
																<a href="#">
																	<img src="../../../../global_assets/images/demo/users/face4.jpg" class="rounded-circle" width="32" height="32" alt="">
																</a>
																<a href="#">
																	<img src="../../../../global_assets/images/demo/users/face18.jpg" class="rounded-circle" width="32" height="32" alt="">
																</a>
															</td>
															<td class="text-center"><span class="badge badge-pill bg-danger">18%</span></td>
														</tr>
														<tr>
															<td><a href="#">Responsive layout changes</a></td>
															<td>Layout</td>
															<td>
																<a href="#">
																	<img src="../../../../global_assets/images/demo/users/face15.jpg" class="rounded-circle" width="32" height="32" alt="">
																</a>
															</td>
															<td class="text-center"><span class="badge badge-pill bg-dark">52%</span></td>
														</tr>
														<tr>
															<td><a href="#">Add categories filter</a></td>
															<td>Content</td>
															<td>
																<a href="#">
																	<img src="../../../../global_assets/images/demo/users/face6.jpg" class="rounded-circle" width="32" height="32" alt="">
																</a>
																<a href="#">
																	<img src="../../../../global_assets/images/demo/users/face12.jpg" class="rounded-circle" width="32" height="32" alt="">
																</a>
																<a href="#">
																	<img src="../../../../global_assets/images/demo/users/face9.jpg" class="rounded-circle" width="32" height="32" alt="">
																</a>
															</td>
															<td class="text-center"><span class="badge badge-pill bg-success">100%</span></td>
														</tr>
														<tr>
															<td><a href="#">Media grid padding issue</a></td>
															<td>Bugs</td>
															<td>
																<a href="#">
																	<img src="../../../../global_assets/images/demo/users/face2.jpg" class="rounded-circle" width="32" height="32" alt="">
																</a>
															</td>
															<td class="text-center"><span class="badge badge-pill bg-success">100%</span></td>
														</tr>
													</tbody>
												</table>
											</div>
										</div>
									</li>

									<li class="nav-item mega-menu-full">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Images</a>
										<div class="dropdown-menu dropdown-content">
											<div class="dropdown-content-header">
												<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase">Grid with images</div>
												<div class="list-icons">
							                		<a href="#" class="list-icons-item"><i class="icon-circle-left2"></i></a>
							                		<a href="#" class="list-icons-item ml-1"><i class="icon-circle-right2"></i></a>
							                	</div>
											</div>

											<div class="dropdown-content-body pb-0">
												<div class="row">
													<div class="col-md-6 col-lg-4 col-xl-2">
														<div class="card">
															<div class="card-img-actions">
																<a href="../../../../global_assets/images/demo/flat/2.png">
																	<img class="card-img-top img-fluid" src="../../../../global_assets/images/demo/flat/1.png" alt="">
																	<span class="card-img-actions-overlay card-img-top">
																		<i class="icon-plus3"></i>
																	</span>
																</a>
															</div>
														</div>
													</div>

													<div class="col-md-6 col-lg-4 col-xl-2">
														<div class="card">
															<div class="card-img-actions">
																<a href="../../../../global_assets/images/demo/flat/6.png">
																	<img class="card-img-top img-fluid" src="../../../../global_assets/images/demo/flat/2.png" alt="">
																	<span class="card-img-actions-overlay card-img-top">
																		<i class="icon-plus3"></i>
																	</span>
																</a>
															</div>
														</div>
													</div>

													<div class="col-md-6 col-lg-4 col-xl-2">
														<div class="card">
															<div class="card-img-actions">
																<a href="../../../../global_assets/images/demo/flat/1.png">
																	<img class="card-img-top img-fluid" src="../../../../global_assets/images/demo/flat/3.png" alt="">
																	<span class="card-img-actions-overlay card-img-top">
																		<i class="icon-plus3"></i>
																	</span>
																</a>
															</div>
														</div>
													</div>

													<div class="col-md-6 col-lg-4 col-xl-2">
														<div class="card">
															<div class="card-img-actions">
																<a href="../../../../global_assets/images/demo/flat/5.png">
																	<img class="card-img-top img-fluid" src="../../../../global_assets/images/demo/flat/4.png" alt="">
																	<span class="card-img-actions-overlay card-img-top">
																		<i class="icon-plus3"></i>
																	</span>
																</a>
															</div>
														</div>
													</div>

													<div class="col-md-6 col-lg-4 col-xl-2">
														<div class="card">
															<div class="card-img-actions">
																<a href="../../../../global_assets/images/demo/flat/5.png">
																	<img class="card-img-top img-fluid" src="../../../../global_assets/images/demo/flat/5.png" alt="">
																	<span class="card-img-actions-overlay card-img-top">
																		<i class="icon-plus3"></i>
																	</span>
																</a>
															</div>
														</div>
													</div>

													<div class="col-md-6 col-lg-4 col-xl-2">
														<div class="card">
															<div class="card-img-actions">
																<a href="../../../../global_assets/images/demo/flat/5.png">
																	<img class="card-img-top img-fluid" src="../../../../global_assets/images/demo/flat/6.png" alt="">
																	<span class="card-img-actions-overlay card-img-top">
																		<i class="icon-plus3"></i>
																	</span>
																</a>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</li>

									<li class="nav-item mega-menu-full">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Videos</a>
										<div class="dropdown-menu dropdown-content">
											<div class="dropdown-content-header">
												<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase">Grid with videos</div>
												<div class="list-icons">
							                		<a href="#" class="list-icons-item"><i class="icon-circle-left2"></i></a>
							                		<a href="#" class="list-icons-item ml-1"><i class="icon-circle-right2"></i></a>
							                	</div>
											</div>

											<div class="dropdown-content-body pb-0">
												<div class="row">
													<div class="col-xl-3">
														<div class="card">
															<div class="embed-responsive embed-responsive-16by9 card-img-top">
																<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/173541384?title=0&byline=0&portrait=0" allowfullscreen frameborder="0" mozallowfullscreen></iframe>
															</div>
														</div>
													</div>

													<div class="col-xl-3">
														<div class="card">
															<div class="embed-responsive embed-responsive-16by9 card-img-top">
																<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/173652088?title=0&byline=0&portrait=0" allowfullscreen frameborder="0" mozallowfullscreen></iframe>
															</div>
														</div>
													</div>

													<div class="col-xl-3">
														<div class="card">
															<div class="embed-responsive embed-responsive-16by9 card-img-top">
																<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/127423845?title=0&byline=0&portrait=0" allowfullscreen frameborder="0" mozallowfullscreen></iframe>
															</div>
														</div>
													</div>

													<div class="col-xl-3">
														<div class="card">
															<div class="embed-responsive embed-responsive-16by9 card-img-top">
																<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/246294149?title=0&byline=0&portrait=0" allowfullscreen frameborder="0" mozallowfullscreen></iframe>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</li>

									<li class="nav-item mega-menu-full">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Cards</a>
										
										<div class="dropdown-menu dropdown-content">
											<div class="dropdown-content-header">
												<span class="font-weight-semibold">Cards and card groups</span>
												<a href="#">View all tasks</a>
											</div>

											<div class="dropdown-content-body pb-0">
												<div class="row">
													<div class="col-xl-4">
														<div class="card">
															<div class="card-body">
																<div class="d-flex flex-wrap justify-content-between mb-2">
																	<span class="font-size-xs line-height-xs text-uppercase text-muted font-weight-semibold">Nov 12, 11:25am</span>
																	<span class="font-size-xs line-height-xs text-uppercase text-success font-weight-semibold">Due in 12 days</span>
																</div>

																<h6 class="pt-1">
																	<a href="#">[#462] - Inaccurate small pagination height</a>
																</h6>

																<p class="mb-3">Ouch found swore much dear conductively hid submissively hatchet vexed far inanimately alongside candidly much and jeez</p>

																<div class="d-flex flex-wrap align-items-center">
																	<a href="#" class="mr-1"><img src="../../../../global_assets/images/demo/users/face1.jpg" class="rounded-round" width="36" height="36" alt=""></a>
																	<a href="#" class="mr-1"><img src="../../../../global_assets/images/demo/users/face24.jpg" class="rounded-round" width="36" height="36" alt=""></a>
																	<a href="#" class="mr-1"><img src="../../../../global_assets/images/demo/users/face11.jpg" class="rounded-round" width="36" height="36" alt=""></a>
																	<a href="#" class="btn btn-outline bg-grey border-grey text-grey-600 btn-icon rounded-round border-2"><i class="icon-plus2"></i></a>
																</div>
															</div>
														</div>
													</div>

													<div class="col-xl-4">
														<div class="card">
															<div class="card-body">
																<div class="d-flex flex-wrap justify-content-between mb-2">
																	<span class="font-size-xs line-height-xs text-uppercase text-muted font-weight-semibold">Dec 25, 09:05am</span>
																	<span class="font-size-xs line-height-xs text-uppercase text-warning-300 font-weight-semibold">Due in 2 days</span>
																</div>

																<h6 class="pt-1">
																	<a href="#">[#548] - Avoid some unnecessary HTML string</a>
																</h6>

																<p class="mb-3">Dear spryly growled much far jeepers vigilantly less and far hideous and some mannishly less jeepers less and and crud</p>

																<div class="d-flex flex-wrap align-items-center">
																	<a href="#" class="mr-1"><img src="../../../../global_assets/images/demo/users/face2.jpg" class="rounded-round" width="36" height="36" alt=""></a>
																	<a href="#" class="mr-1"><img src="../../../../global_assets/images/demo/users/face12.jpg" class="rounded-round" width="36" height="36" alt=""></a>
																	<a href="#" class="mr-1"><img src="../../../../global_assets/images/demo/users/face3.jpg" class="rounded-round" width="36" height="36" alt=""></a>
																	<a href="#" class="btn btn-outline bg-grey border-grey text-grey-600 btn-icon rounded-round border-2"><i class="icon-plus2"></i></a>
																</div>
															</div>
														</div>
													</div>

													<div class="col-xl-4">
														<div class="card">
															<div class="card-body">
																<div class="d-flex flex-wrap justify-content-between mb-2">
																	<span class="font-size-xs line-height-xs text-uppercase text-muted font-weight-semibold">Jan 02, 11:25pm</span>
																	<span class="font-size-xs line-height-xs text-uppercase text-danger font-weight-semibold">Overdue</span>
																</div>

																<h6 class="pt-1">
																	<a href="#">[#764] - Update json configuration</a>
																</h6>

																<p class="mb-3">Diabolically somberly astride crass one endearingly blatant depending peculiar antelope piquantly popularly adept much</p>

																<div class="d-flex flex-wrap align-items-center">
																	<a href="#" class="mr-1"><img src="../../../../global_assets/images/demo/users/face5.jpg" class="rounded-round" width="36" height="36" alt=""></a>
																	<a href="#" class="mr-1"><img src="../../../../global_assets/images/demo/users/face3.jpg" class="rounded-round" width="36" height="36" alt=""></a>
																	<a href="#" class="mr-1"><img src="../../../../global_assets/images/demo/users/face10.jpg" class="rounded-round" width="36" height="36" alt=""></a>
																	<a href="#" class="btn btn-outline bg-grey border-grey text-grey-600 btn-icon rounded-round border-2"><i class="icon-plus2"></i></a>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</li>

									<li class="nav-item mega-menu-full">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Collapsible</a>
										<div class="dropdown-menu dropdown-content">
											<div class="dropdown-content-header">
												<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase">Collapsible cards</div>
												<a href="#" class="text-default"><i class="icon-gear"></i></a>
											</div>

											<div class="dropdown-content-body pb-0">
												<div class="row">
													<div class="col-xl-6">
														<div id="accordion-group">
															<div class="card mb-0 rounded-bottom-0">
																<div class="card-header">
																	<div class="card-title font-weight-semibold">
																		<a data-toggle="collapse" class="text-default" href="#accordion-item-group1">Accordion Item #1</a>
																	</div>
																</div>

																<div id="accordion-item-group1" class="collapse show" data-parent="#accordion-group">
																	<div class="card-body">
																		Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
																	</div>
																</div>
															</div>

															<div class="card mb-0 rounded-0 border-y-0">
																<div class="card-header">
																	<div class="card-title font-weight-semibold">
																		<a class="collapsed text-default" data-toggle="collapse" href="#accordion-item-group2">Accordion Item #2</a>
																	</div>
																</div>

																<div id="accordion-item-group2" class="collapse" data-parent="#accordion-group">
																	<div class="card-body">
																		Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda.
																	</div>
																</div>
															</div>

															<div class="card rounded-top-0">
																<div class="card-header">
																	<div class="card-title font-weight-semibold">
																		<a class="collapsed text-default" data-toggle="collapse" href="#accordion-item-group3">Accordion Item #3</a>
																	</div>
																</div>

																<div id="accordion-item-group3" class="collapse" data-parent="#accordion-group">
																	<div class="card-body">
																		3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.
																	</div>
																</div>
															</div>
														</div>
													</div>

													<div class="col-xl-6">
														<div>
															<div class="card mb-0 rounded-bottom-0">
																<div class="card-header">
																	<div class="card-title font-weight-semibold">
																		<a data-toggle="collapse" class="text-default" href="#collapsible-item-group1">Collapsible Item #1</a>
																	</div>
																</div>

																<div id="collapsible-item-group1" class="collapse show">
																	<div class="card-body">
																		Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
																	</div>
																</div>
															</div>

															<div class="card mb-0 rounded-0 border-y-0">
																<div class="card-header">
																	<div class="card-title font-weight-semibold">
																		<a class="collapsed text-default" data-toggle="collapse" href="#collapsible-item-group2">Collapsible Item #2</a>
																	</div>
																</div>

																<div id="collapsible-item-group2" class="collapse">
																	<div class="card-body">
																		Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda.
																	</div>
																</div>
															</div>

															<div class="card rounded-top-0">
																<div class="card-header">
																	<div class="card-title font-weight-semibold">
																		<a class="collapsed text-default" data-toggle="collapse" href="#collapsible-item-group3">Collapsible Item #3</a>
																	</div>
																</div>

																<div id="collapsible-item-group3" class="collapse">
																	<div class="card-body">
																		3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</li>
								</ul>

								<ul class="navbar-nav ml-xl-auto">
									<li class="nav-item mega-menu-full">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Mixed content</a>
										<div class="dropdown-menu dropdown-content">
											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-xl-8">
														<div class="row">
															<div class="col-xl-3">
																<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase mt-1">Form components</div>
																<div class="dropdown-divider mb-2"></div>
																<div class="mb-3 mb-xl-0">
																	<a href="form_inputs.html" class="dropdown-item rounded">Basic inputs</a>
																	<a href="form_controls_extended.html" class="dropdown-item rounded">Extended controls</a>
																	<a href="form_select2.html" class="dropdown-item rounded">Select2 selects</a>
																	<a href="form_floating_labels.html" class="dropdown-item rounded">Floating labels</a>
																	<a href="form_validation.html" class="dropdown-item rounded">Validation</a>
																</div>
															</div>
															<div class="col-xl-3">
																<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase mt-1">UI components</div>
																<div class="dropdown-divider mb-2"></div>
																<div class="mb-3 mb-xl-0">
																	<a href="components_modals.html" class="dropdown-item rounded">Modals <span class="badge badge-pill bg-grey ml-auto">10+</span></a>
																	<a href="components_dropdowns.html" class="dropdown-item rounded">Dropdown menus</a>
																	<a href="components_buttons.html" class="dropdown-item rounded">Buttons</a>
																	<a href="components_tabs.html" class="dropdown-item rounded">Tabs component</a>
																	<a href="components_breadcrumbs.html" class="dropdown-item rounded">Breadcrumbs</a>
																</div>
															</div>
															<div class="col-xl-3">
																<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase mt-1">Sidebars</div>
																<div class="dropdown-divider mb-2"></div>
																<div class="mb-3 mb-xl-0">
																	<a href="sidebar_default_collapse.html" class="dropdown-item rounded">Main sidebar</a>
																	<a href="sidebar_secondary_after.html" class="dropdown-item rounded">Secondary sidebar</a>
																	<a href="sidebar_right_default_collapse.html" class="dropdown-item rounded">Right sidebar</a>
																	<a href="sidebar_content_left.html" class="dropdown-item rounded">Content sidebar</a>
																	<a href="sidebar_components.html" class="dropdown-item rounded">Sidebar components</a>
																</div>
															</div>
															<div class="col-xl-3">
																<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase mt-1">Navigation</div>
																<div class="dropdown-divider mb-2"></div>
																<div class="mb-3 mb-xl-0">
																	<a href="navigation_horizontal_click.html" class="dropdown-item rounded">Submenu on click</a>
																	<a href="navigation_horizontal_hover.html" class="dropdown-item rounded">Submenu on hover</a>
																	<a href="navigation_horizontal_elements.html" class="dropdown-item rounded">With custom elements</a>
																	<a href="navigation_horizontal_tabs.html" class="dropdown-item rounded">Tabbed navigation</a>
																	<a href="navigation_horizontal_mega.html" class="dropdown-item rounded active">Horizontal mega menu</a>
																</div>
															</div>
														</div>
													</div>

													<div class="col-xl-4">
														<div class="card-img">
															<iframe src="https://player.vimeo.com/video/173541384?title=0&byline=0&portrait=0" height="230" width="100%" allowfullscreen frameborder="0" mozallowfullscreen></iframe>
														</div>
													</div>
												</div>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- /content components -->


				<!-- Content nav -->
				<div class="card">
					<div class="card-header header-elements-inline">
						<h5 class="card-title">Content nav</h5>
						<div class="header-elements">
							<div class="list-icons">
		                		<a class="list-icons-item" data-action="collapse"></a>
		                		<a class="list-icons-item" data-action="reload"></a>
		                		<a class="list-icons-item" data-action="remove"></a>
		                	</div>
	                	</div>
					</div>

					<div class="card-body">
						<p class="mb-3">This option is completely custom - Bootstrap doesn't support content nav components in dropdown menu by default, because of the class name conflicts and <code>dropdown.js</code> component limitation. This has been improved and both tabs and pills components can be used in dropdowns. There is a requirement - dropdown menu container should have <code>.dropdown-content</code> class to keep menu opened when links inside are clicked. Tabs and pills can be placed anywhere in the dropdown - top, center, bottom, left, right, can be nested and can have any type of content.</p>

						<p class="font-weight-semibold">Examples:</p>
						<div class="navbar navbar-expand-xl navbar-dark bg-info-700 navbar-component rounded mb-1">
							<div class="navbar-brand">
								<a href="index.html" class="d-inline-block">
									<img src="../../../../global_assets/images/logo_light.png" alt="">
								</a>
							</div>

							<div class="d-xl-none">
								<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-content-nav">
									<i class="icon-menu"></i>
								</button>
							</div>

							<div class="navbar-collapse collapse" id="navbar-content-nav">
								<ul class="navbar-nav">
									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Basic tabs</a>
										
										<div class="dropdown-menu dropdown-content wmin-xl-350">
											<div class="dropdown-content-header">
												<span class="font-weight-semibold">Highlighted tabs</span>
												<a href="#" class="text-default"><i class="icon-gear"></i></a>
											</div>

											<ul class="nav nav-tabs nav-tabs-highlight nav-justified text-nowrap flex-nowrap mb-0">
												<li class="nav-item">
													<a href="#basic-tab1" class="nav-link border-left-0 active" data-toggle="tab">
														<i class="icon-menu7 mr-2"></i>
														Active
													</a>
												</li>
												<li class="nav-item">
													<a href="#basic-tab2" class="nav-link" data-toggle="tab">
														<i class="icon-mention mr-2"></i>
														Inactive
													</a>
												</li>
												<li class="nav-item">
													<a href="#basic-tab3" class="nav-link disabled border-right-0" data-toggle="tab">
														<i class="icon-comment-discussion mr-2"></i>
														Disabled
													</a>
												</li>
											</ul>

											<div class="tab-content">
												<div class="tab-pane fade active show" id="basic-tab1">
													<div class="dropdown-content-body">
														<div class="row">
															<div class="col-12">
																<div class="alpha-slate p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-danger p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-teal p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-blue p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-brown p-1 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-purple p-2 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-pink p-2 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-success p-2 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-green p-1 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-primary p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-info p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-orange p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-brown p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-primary p-1 mb-2"></div>
															</div>
															<div class="col-7">
																<div class="alpha-slate p-2 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-warning p-2 mb-2"></div>
															</div>
															<div class="col-2">
																<div class="alpha-green p-2 mb-2"></div>
															</div>
														</div>
													</div>
												</div>

												<div class="tab-pane fade" id="basic-tab2">
													<div class="dropdown-content-body">
														<div class="row">
															<div class="col-7">
																<div class="alpha-slate p-2 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-warning p-2 mb-2"></div>
															</div>
															<div class="col-2">
																<div class="alpha-green p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-brown p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-primary p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-info p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-orange p-2 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-green p-1 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-primary p-1 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-purple p-2 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-pink p-2 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-success p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-blue p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-brown p-1 mb-2"></div>
															</div>
															<div class="col-12">
																<div class="alpha-slate p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-danger p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-teal p-2 mb-2"></div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</li>

									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Underline tabs</a>
										
										<div class="dropdown-menu dropdown-content wmin-xl-350">
											<div class="dropdown-content-header pb-2">
												<span class="font-weight-semibold">Underline tabs</span>
												<a href="#" class="text-default"><i class="icon-gear"></i></a>
											</div>

											<ul class="nav nav-tabs nav-tabs-bottom nav-justified text-nowrap flex-nowrap mb-0">
												<li class="nav-item">
													<a href="#underline-tab1" class="nav-link active" data-toggle="tab">
														<i class="icon-menu7 mr-2"></i>
														Active
													</a>
												</li>
												<li class="nav-item">
													<a href="#underline-tab2" class="nav-link" data-toggle="tab">
														<i class="icon-mention mr-2"></i>
														Inactive
													</a>
												</li>
												<li class="nav-item">
													<a href="#underline-tab3" class="nav-link disabled" data-toggle="tab">
														<i class="icon-comment-discussion mr-2"></i>
														Disabled
													</a>
												</li>
											</ul>

											<div class="tab-content">
												<div class="tab-pane fade active show" id="underline-tab1">
													<div class="dropdown-content-body">
														<div class="row">
															<div class="col-12">
																<div class="alpha-slate p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-danger p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-teal p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-blue p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-brown p-1 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-purple p-2 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-pink p-2 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-success p-2 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-green p-1 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-primary p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-info p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-orange p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-brown p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-primary p-1 mb-2"></div>
															</div>
															<div class="col-7">
																<div class="alpha-slate p-2 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-warning p-2 mb-2"></div>
															</div>
															<div class="col-2">
																<div class="alpha-green p-2 mb-2"></div>
															</div>
														</div>
													</div>
												</div>

												<div class="tab-pane fade" id="underline-tab2">
													<div class="dropdown-content-body">
														<div class="row">
															<div class="col-7">
																<div class="alpha-slate p-2 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-warning p-2 mb-2"></div>
															</div>
															<div class="col-2">
																<div class="alpha-green p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-brown p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-primary p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-info p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-orange p-2 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-green p-1 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-primary p-1 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-purple p-2 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-pink p-2 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-success p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-blue p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-brown p-1 mb-2"></div>
															</div>
															<div class="col-12">
																<div class="alpha-slate p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-danger p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-teal p-2 mb-2"></div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</li>

									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Toolbar tabs</a>
										
										<div class="dropdown-menu dropdown-content wmin-xl-350">
											<div class="dropdown-content-header bg-transparent">
												<span class="font-weight-semibold">Tabs as a toolbar</span>
												<a href="#" class="text-default"><i class="icon-gear"></i></a>
											</div>

											<ul class="nav nav-tabs nav-tabs-bottom border-top-1 bg-light nav-justified text-nowrap flex-nowrap mb-0">
												<li class="nav-item">
													<a href="#toolbar-tab1" class="nav-link active" data-toggle="tab">
														<i class="icon-menu7 mr-2"></i>
														Active
													</a>
												</li>
												<li class="nav-item">
													<a href="#toolbar-tab2" class="nav-link" data-toggle="tab">
														<i class="icon-mention mr-2"></i>
														Inactive
													</a>
												</li>
												<li class="nav-item">
													<a href="#toolbar-tab3" class="nav-link disabled" data-toggle="tab">
														<i class="icon-comment-discussion mr-2"></i>
														Disabled
													</a>
												</li>
											</ul>

											<div class="tab-content">
												<div class="tab-pane fade active show" id="toolbar-tab1">
													<div class="dropdown-content-body">
														<div class="row">
															<div class="col-12">
																<div class="alpha-slate p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-danger p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-teal p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-blue p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-brown p-1 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-purple p-2 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-pink p-2 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-success p-2 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-green p-1 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-primary p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-info p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-orange p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-brown p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-primary p-1 mb-2"></div>
															</div>
															<div class="col-7">
																<div class="alpha-slate p-2 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-warning p-2 mb-2"></div>
															</div>
															<div class="col-2">
																<div class="alpha-green p-2 mb-2"></div>
															</div>
														</div>
													</div>
												</div>

												<div class="tab-pane fade" id="toolbar-tab2">
													<div class="dropdown-content-body">
														<div class="row">
															<div class="col-7">
																<div class="alpha-slate p-2 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-warning p-2 mb-2"></div>
															</div>
															<div class="col-2">
																<div class="alpha-green p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-brown p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-primary p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-info p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-orange p-2 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-green p-1 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-primary p-1 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-purple p-2 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-pink p-2 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-success p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-blue p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-brown p-1 mb-2"></div>
															</div>
															<div class="col-12">
																<div class="alpha-slate p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-danger p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-teal p-2 mb-2"></div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</li>

									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Bottom tabs</a>
										
										<div class="dropdown-menu dropdown-content wmin-xl-350">
											<div class="dropdown-content-header pb-0">
												<span class="font-weight-semibold">Bottom tabs</span>
												<a href="#" class="text-default"><i class="icon-gear"></i></a>
											</div>

											<div class="tab-content">
												<div class="tab-pane fade active show" id="top-tab1">
													<div class="dropdown-content-body">
														<div class="row">
															<div class="col-12">
																<div class="alpha-slate p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-danger p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-teal p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-blue p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-brown p-1 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-purple p-2 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-pink p-2 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-success p-2 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-green p-1 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-primary p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-info p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-orange p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-brown p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-primary p-1 mb-2"></div>
															</div>
															<div class="col-7">
																<div class="alpha-slate p-2 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-warning p-2 mb-2"></div>
															</div>
															<div class="col-2">
																<div class="alpha-green p-2 mb-2"></div>
															</div>
														</div>
													</div>
												</div>

												<div class="tab-pane fade" id="top-tab2">
													<div class="dropdown-content-body">
														<div class="row">
															<div class="col-7">
																<div class="alpha-slate p-2 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-warning p-2 mb-2"></div>
															</div>
															<div class="col-2">
																<div class="alpha-green p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-brown p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-primary p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-info p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-orange p-2 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-green p-1 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-primary p-1 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-purple p-2 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-pink p-2 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-success p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-blue p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-brown p-1 mb-2"></div>
															</div>
															<div class="col-12">
																<div class="alpha-slate p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-danger p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-teal p-2 mb-2"></div>
															</div>
														</div>
													</div>
												</div>
											</div>

											<ul class="nav nav-tabs nav-tabs-top nav-justified bg-light border-top-1 border-bottom-0 rounded-bottom text-nowrap flex-nowrap mb-0">
												<li class="nav-item">
													<a href="#top-tab1" class="nav-link active" data-toggle="tab">
														<i class="icon-menu7 mr-2"></i>
														Active
													</a>
												</li>
												<li class="nav-item">
													<a href="#top-tab2" class="nav-link" data-toggle="tab">
														<i class="icon-mention mr-2"></i>
														Inactive
													</a>
												</li>
												<li class="nav-item">
													<a href="#top-tab3" class="nav-link disabled" data-toggle="tab">
														<i class="icon-comment-discussion mr-2"></i>
														Disabled
													</a>
												</li>
											</ul>
										</div>
									</li>
								</ul>

								<ul class="navbar-nav ml-xl-auto">
									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Pills</a>
										
										<div class="dropdown-menu dropdown-menu-right dropdown-content wmin-xl-400">
											<div class="dropdown-content-header">
												<span class="font-weight-semibold">Basic pills</span>
												<a href="#" class="text-default"><i class="icon-gear"></i></a>
											</div>

											<div class="dropdown-content-body pb-0">
												<ul class="nav nav-pills nav-justified text-nowrap flex-nowrap mb-0">
													<li class="nav-item">
														<a href="#basic-pill1" class="nav-link active" data-toggle="tab">
															<i class="icon-menu7 mr-2"></i>
															Active
														</a>
													</li>
													<li class="nav-item">
														<a href="#basic-pill2" class="nav-link" data-toggle="tab">
															<i class="icon-mention mr-2"></i>
															Inactive
														</a>
													</li>
													<li class="nav-item">
														<a href="#basic-pill3" class="nav-link disabled" data-toggle="tab">
															<i class="icon-comment-discussion mr-2"></i>
															Disabled
														</a>
													</li>
												</ul>
											</div>

											<div class="tab-content">
												<div class="tab-pane fade active show" id="basic-pill1">
													<div class="dropdown-content-body">
														<div class="row">
															<div class="col-12">
																<div class="alpha-slate p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-danger p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-teal p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-blue p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-brown p-1 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-purple p-2 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-pink p-2 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-success p-2 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-green p-1 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-primary p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-info p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-orange p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-brown p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-primary p-1 mb-2"></div>
															</div>
															<div class="col-7">
																<div class="alpha-slate p-2 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-warning p-2 mb-2"></div>
															</div>
															<div class="col-2">
																<div class="alpha-green p-2 mb-2"></div>
															</div>
														</div>
													</div>
												</div>

												<div class="tab-pane fade" id="basic-pill2">
													<div class="dropdown-content-body">
														<div class="row">
															<div class="col-7">
																<div class="alpha-slate p-2 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-warning p-2 mb-2"></div>
															</div>
															<div class="col-2">
																<div class="alpha-green p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-brown p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-primary p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-info p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-orange p-2 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-green p-1 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-primary p-1 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-purple p-2 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-pink p-2 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-success p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-blue p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-brown p-1 mb-2"></div>
															</div>
															<div class="col-12">
																<div class="alpha-slate p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-danger p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-teal p-2 mb-2"></div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</li>

									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Pills toolbar</a>
										
										<div class="dropdown-menu dropdown-menu-right dropdown-content wmin-xl-450">
											<div class="dropdown-content-header">
												<span class="font-weight-semibold">Pills toolbar</span>
												<a href="#" class="text-default"><i class="icon-gear"></i></a>
											</div>

											<div class="dropdown-content-body pb-0">
												<ul class="nav nav-pills nav-pills-bordered nav-pills-toolbar nav-justified text-nowrap flex-nowrap mb-0">
													<li class="nav-item">
														<a href="#toolbar-pill1" class="nav-link active" data-toggle="tab">
															<i class="icon-menu7 mr-2"></i>
															Active
														</a>
													</li>
													<li class="nav-item">
														<a href="#toolbar-pill2" class="nav-link" data-toggle="tab">
															<i class="icon-mention mr-2"></i>
															Inactive
														</a>
													</li>
													<li class="nav-item">
														<a href="#toolbar-pill3" class="nav-link disabled" data-toggle="tab">
															<i class="icon-comment-discussion mr-2"></i>
															Disabled
														</a>
													</li>
												</ul>
											</div>

											<div class="tab-content">
												<div class="tab-pane fade active show" id="toolbar-pill1">
													<div class="dropdown-content-body">
														<div class="row">
															<div class="col-12">
																<div class="alpha-slate p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-danger p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-teal p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-blue p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-brown p-1 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-purple p-2 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-pink p-2 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-success p-2 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-green p-1 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-primary p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-info p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-orange p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-brown p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-primary p-1 mb-2"></div>
															</div>
															<div class="col-7">
																<div class="alpha-slate p-2 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-warning p-2 mb-2"></div>
															</div>
															<div class="col-2">
																<div class="alpha-green p-2 mb-2"></div>
															</div>
														</div>
													</div>
												</div>

												<div class="tab-pane fade" id="toolbar-pill2">
													<div class="dropdown-content-body">
														<div class="row">
															<div class="col-7">
																<div class="alpha-slate p-2 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-warning p-2 mb-2"></div>
															</div>
															<div class="col-2">
																<div class="alpha-green p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-brown p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-primary p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-info p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-orange p-2 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-green p-1 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-primary p-1 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-purple p-2 mb-2"></div>
															</div>
															<div class="col-6">
																<div class="alpha-pink p-2 mb-2"></div>
															</div>
															<div class="col-3">
																<div class="alpha-success p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-blue p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-brown p-1 mb-2"></div>
															</div>
															<div class="col-12">
																<div class="alpha-slate p-1 mb-2"></div>
															</div>
															<div class="col-4">
																<div class="alpha-danger p-2 mb-2"></div>
															</div>
															<div class="col-8">
																<div class="alpha-teal p-2 mb-2"></div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- /content nav -->


				<!-- Menu header styles -->
				<div class="card">
					<div class="card-header header-elements-inline">
						<h5 class="card-title">Menu header styles</h5>
						<div class="header-elements">
							<div class="list-icons">
		                		<a class="list-icons-item" data-action="collapse"></a>
		                		<a class="list-icons-item" data-action="reload"></a>
		                		<a class="list-icons-item" data-action="remove"></a>
		                	</div>
	                	</div>
					</div>

					<div class="card-body">
						<p class="mb-3">All dropdown menus support custom <strong>header</strong> with a number of elements - plain text, text links, buttons, single icons and icon groups, small images, badges and badge pills. Thanks to the power of flex model, all elements can be easily aligned vertically and horizontally. Vertical and horizontal spacing of dropdown header is equal to menu body spacing for better content alignment, but you can easily change it in <code>$dropdown-content-header-padding-y</code> variable or using spacing utility classes. Horizontal spacing of menu header depends on menu body spacing.</p>

						<p class="font-weight-semibold">Examples:</p>
						<div class="navbar navbar-expand-xl navbar-dark bg-info-700 navbar-component rounded mb-1">
							<div class="navbar-brand">
								<a href="index.html" class="d-inline-block">
									<img src="../../../../global_assets/images/logo_light.png" alt="">
								</a>
							</div>

							<div class="d-xl-none">
								<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#mega-menu-headers">
									<i class="icon-menu"></i>
								</button>
							</div>

							<div class="navbar-collapse collapse" id="mega-menu-headers">
								<ul class="navbar-nav">
									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Basic</a>
										
										<div class="dropdown-menu dropdown-content wmin-xl-300">
											<div class="dropdown-content-header">
												<span class="font-weight-semibold">Menu header</span>
											</div>

											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-12">
														<div class="alpha-slate p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-danger p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-teal p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-blue p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-purple p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-pink p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-success p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-green p-1 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-info p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-orange p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-7">
														<div class="alpha-slate p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-warning p-2 mb-2"></div>
													</div>
													<div class="col-2">
														<div class="alpha-green p-2 mb-2"></div>
													</div>
												</div>
											</div>
										</div>
									</li>

									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Text styles</a>
										
										<div class="dropdown-menu dropdown-content wmin-xl-300">
											<div class="dropdown-content-header">
												<span class="font-size-sm line-height-sm text-uppercase font-weight-semibold">Uppercase header</span>
											</div>

											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-12">
														<div class="alpha-slate p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-danger p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-teal p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-blue p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-purple p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-pink p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-success p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-green p-1 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-info p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-orange p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-7">
														<div class="alpha-slate p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-warning p-2 mb-2"></div>
													</div>
													<div class="col-2">
														<div class="alpha-green p-2 mb-2"></div>
													</div>
												</div>
											</div>
										</div>
									</li>

									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Divider</a>
										
										<div class="dropdown-menu dropdown-content wmin-xl-300">
											<div class="dropdown-content-header bg-transparent">
												<span class="font-size-sm line-height-sm text-uppercase font-weight-semibold">Divided header</span>
											</div>

											<div class="dropdown-divider m-0"></div>

											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-12">
														<div class="alpha-slate p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-danger p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-teal p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-blue p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-purple p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-pink p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-success p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-green p-1 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-info p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-orange p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-7">
														<div class="alpha-slate p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-warning p-2 mb-2"></div>
													</div>
													<div class="col-2">
														<div class="alpha-green p-2 mb-2"></div>
													</div>
												</div>
											</div>
										</div>
									</li>

									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Heading</a>
										
										<div class="dropdown-menu dropdown-content wmin-xl-300">
											<div class="dropdown-content-header">
												<h6 class="m-0">H6 heading title</h6>
											</div>

											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-12">
														<div class="alpha-slate p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-danger p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-teal p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-blue p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-purple p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-pink p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-success p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-green p-1 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-info p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-orange p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-7">
														<div class="alpha-slate p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-warning p-2 mb-2"></div>
													</div>
													<div class="col-2">
														<div class="alpha-green p-2 mb-2"></div>
													</div>
												</div>
											</div>
										</div>
									</li>

									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Single icon</a>
										
										<div class="dropdown-menu dropdown-content wmin-xl-300">
											<div class="dropdown-content-header">
												<span class="font-size-sm line-height-sm text-uppercase font-weight-semibold">Menu header</span>
												<a href="#" class="text-default"><i class="icon-gear"></i></a>
											</div>

											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-12">
														<div class="alpha-slate p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-danger p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-teal p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-blue p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-purple p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-pink p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-success p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-green p-1 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-info p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-orange p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-7">
														<div class="alpha-slate p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-warning p-2 mb-2"></div>
													</div>
													<div class="col-2">
														<div class="alpha-green p-2 mb-2"></div>
													</div>
												</div>
											</div>
										</div>
									</li>

									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Icon group</a>
										
										<div class="dropdown-menu dropdown-content wmin-xl-300">
											<div class="dropdown-content-header">
												<span class="font-size-sm line-height-sm text-uppercase font-weight-semibold">Menu header</span>
												<div class="list-icons">
							                		<a href="#" class="list-icons-item"><i class="icon-mention"></i></a>
							                		<a href="#" class="list-icons-item"><i class="icon-comment-discussion"></i></a>
							                		<a href="#" class="list-icons-item"><i class="icon-gear"></i></a>
							                	</div>
											</div>

											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-12">
														<div class="alpha-slate p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-danger p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-teal p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-blue p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-purple p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-pink p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-success p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-green p-1 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-info p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-orange p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-7">
														<div class="alpha-slate p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-warning p-2 mb-2"></div>
													</div>
													<div class="col-2">
														<div class="alpha-green p-2 mb-2"></div>
													</div>
												</div>
											</div>
										</div>
									</li>
								</ul>

								<ul class="navbar-nav ml-xl-auto">
									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Custom color</a>
										
										<div class="dropdown-menu dropdown-menu-right dropdown-content wmin-xl-300">
											<div class="dropdown-content-header bg-dark">
												<span class="font-size-sm line-height-sm text-uppercase font-weight-semibold">Custom header color</span>
												<a href="#" class="text-white"><i class="icon-gear"></i></a>
											</div>

											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-12">
														<div class="alpha-slate p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-danger p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-teal p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-blue p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-purple p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-pink p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-success p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-green p-1 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-info p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-orange p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-7">
														<div class="alpha-slate p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-warning p-2 mb-2"></div>
													</div>
													<div class="col-2">
														<div class="alpha-green p-2 mb-2"></div>
													</div>
												</div>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- /menu header styles -->


				<!-- Menu footer styles -->
				<div class="card">
					<div class="card-header header-elements-inline">
						<h5 class="card-title">Menu footer styles</h5>
						<div class="header-elements">
							<div class="list-icons">
		                		<a class="list-icons-item" data-action="collapse"></a>
		                		<a class="list-icons-item" data-action="reload"></a>
		                		<a class="list-icons-item" data-action="remove"></a>
		                	</div>
	                	</div>
					</div>

					<div class="card-body">
						<p class="mb-3">All dropdown menus support custom <strong>footers</strong> with a number of elements - plain text, text links, buttons, single icons and icon groups, small images, badges and badge pills. Thanks to the power of flex model, all elements can be easily aligned vertically and horizontally. Menu footer has top border and light grey background color by default, but also support custom colors by adding color utility classes (some elements require minor color adjustments as well). You can also control vertical spacing and other options with our set of utility classes.</p>

						<p class="font-weight-semibold">Examples:</p>
						<div class="navbar navbar-expand-xl navbar-dark bg-info-700 navbar-component rounded mb-1">
							<div class="navbar-brand">
								<a href="index.html" class="d-inline-block">
									<img src="../../../../global_assets/images/logo_light.png" alt="">
								</a>
							</div>

							<div class="d-xl-none">
								<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#mega-menu-footers">
									<i class="icon-menu"></i>
								</button>
							</div>

							<div class="navbar-collapse collapse" id="mega-menu-footers">
								<ul class="navbar-nav">
									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Text</a>
										
										<div class="dropdown-menu dropdown-content wmin-xl-300">
											<div class="dropdown-content-header">
												<span class="font-weight-semibold">Menu header</span>
											</div>

											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-12">
														<div class="alpha-slate p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-danger p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-teal p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-blue p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-purple p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-pink p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-success p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-green p-1 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-info p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-orange p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-7">
														<div class="alpha-slate p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-warning p-2 mb-2"></div>
													</div>
													<div class="col-2">
														<div class="alpha-green p-2 mb-2"></div>
													</div>
												</div>
											</div>

											<div class="dropdown-content-footer bg-light">
												<span>Left text</span>
												<span class="ml-auto">Right text</span>
											</div>
										</div>
									</li>

									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Links</a>
										
										<div class="dropdown-menu dropdown-content wmin-xl-300">
											<div class="dropdown-content-header">
												<span class="font-weight-semibold">Menu header</span>
											</div>

											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-12">
														<div class="alpha-slate p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-danger p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-teal p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-blue p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-purple p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-pink p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-success p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-green p-1 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-info p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-orange p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-7">
														<div class="alpha-slate p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-warning p-2 mb-2"></div>
													</div>
													<div class="col-2">
														<div class="alpha-green p-2 mb-2"></div>
													</div>
												</div>
											</div>

											<div class="dropdown-content-footer bg-light">
												<a href="#">Left link</a>
												<a href="#" class="ml-auto">Right link</a>
											</div>
										</div>
									</li>

									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Icons</a>
										
										<div class="dropdown-menu dropdown-content wmin-xl-300">
											<div class="dropdown-content-header">
												<span class="font-weight-semibold">Menu header</span>
											</div>

											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-12">
														<div class="alpha-slate p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-danger p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-teal p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-blue p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-purple p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-pink p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-success p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-green p-1 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-info p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-orange p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-7">
														<div class="alpha-slate p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-warning p-2 mb-2"></div>
													</div>
													<div class="col-2">
														<div class="alpha-green p-2 mb-2"></div>
													</div>
												</div>
											</div>

											<div class="dropdown-content-footer bg-light">
												<div>
													<a href="#" class="text-grey"><i class="icon-graph"></i></a>
													<a href="#" class="text-grey ml-2"><i class="icon-bug2"></i></a>
												</div>

												<div class="ml-auto">
													<a href="#" class="text-grey"><i class="icon-git-compare"></i></a>
													<a href="#" class="text-grey ml-2"><i class="icon-gear"></i></a>
												</div>
											</div>
										</div>
									</li>

									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Combo</a>
										
										<div class="dropdown-menu dropdown-content wmin-xl-300">
											<div class="dropdown-content-header">
												<span class="font-weight-semibold">Menu header</span>
											</div>

											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-12">
														<div class="alpha-slate p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-danger p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-teal p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-blue p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-purple p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-pink p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-success p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-green p-1 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-info p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-orange p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-7">
														<div class="alpha-slate p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-warning p-2 mb-2"></div>
													</div>
													<div class="col-2">
														<div class="alpha-green p-2 mb-2"></div>
													</div>
												</div>
											</div>

											<div class="dropdown-content-footer bg-light">
												<a href="#" class="d-inline-block text-grey">All updates</a>
												<div class="ml-auto">
													<a href="#" class="text-grey"><i class="icon-comment-discussion"></i></a>
													<a href="#" class="text-grey ml-2"><i class="icon-gear"></i></a>
												</div>
											</div>
										</div>
									</li>

									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Full width link</a>
										
										<div class="dropdown-menu dropdown-content wmin-xl-300">
											<div class="dropdown-content-header">
												<span class="font-weight-semibold">Menu header</span>
											</div>

											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-12">
														<div class="alpha-slate p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-danger p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-teal p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-blue p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-purple p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-pink p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-success p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-green p-1 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-info p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-orange p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-7">
														<div class="alpha-slate p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-warning p-2 mb-2"></div>
													</div>
													<div class="col-2">
														<div class="alpha-green p-2 mb-2"></div>
													</div>
												</div>
											</div>

											<div class="dropdown-content-footer justify-content-center p-0">
												<a href="#" class="d-block bg-light text-grey w-100 py-2"><i class="icon-menu7 d-block top-0"></i></a>
											</div>
										</div>
									</li>

									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Buttons</a>
										
										<div class="dropdown-menu dropdown-content wmin-xl-300">
											<div class="dropdown-content-header">
												<span class="font-weight-semibold">Menu header</span>
											</div>

											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-12">
														<div class="alpha-slate p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-danger p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-teal p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-blue p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-purple p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-pink p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-success p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-green p-1 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-info p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-orange p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-7">
														<div class="alpha-slate p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-warning p-2 mb-2"></div>
													</div>
													<div class="col-2">
														<div class="alpha-green p-2 mb-2"></div>
													</div>
												</div>
											</div>

											<div class="dropdown-content-footer bg-light">
												<a href="#" class="btn btn-light bg-white"><i class="icon-cross2 font-size-base mr-2"></i> Cancel</a>
												<a href="#" class="btn btn-primary ml-auto"><i class="icon-paperplane font-size-base mr-2"></i> Submit</a>
											</div>
										</div>
									</li>
								</ul>

								<ul class="navbar-nav ml-xl-auto">
									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Custom color</a>
										
										<div class="dropdown-menu dropdown-menu-right dropdown-content wmin-xl-300">
											<div class="dropdown-content-header">
												<span class="font-weight-semibold">Menu header</span>
											</div>

											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-12">
														<div class="alpha-slate p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-danger p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-teal p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-blue p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-purple p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-pink p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-success p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-green p-1 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-info p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-orange p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-7">
														<div class="alpha-slate p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-warning p-2 mb-2"></div>
													</div>
													<div class="col-2">
														<div class="alpha-green p-2 mb-2"></div>
													</div>
												</div>
											</div>

											<div class="dropdown-content-footer bg-dark border-top-0">
												<a href="#" class="d-inline-block text-white">All updates</a>
												<div class="ml-auto">
													<a href="#" class="text-white"><i class="icon-comment-discussion"></i></a>
													<a href="#" class="text-white ml-2"><i class="icon-gear"></i></a>
												</div>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- /menu footer styles -->


				<!-- Form layouts -->
				<div class="card">
					<div class="card-header header-elements-inline">
						<h5 class="card-title">Form layouts</h5>
						<div class="header-elements">
							<div class="list-icons">
		                		<a class="list-icons-item" data-action="collapse"></a>
		                		<a class="list-icons-item" data-action="reload"></a>
		                		<a class="list-icons-item" data-action="remove"></a>
		                	</div>
	                	</div>
					</div>

					<div class="card-body">
						<p class="mb-3">Dropdown menu supports all available form layouts - inline, vertical and horizontal. You can use the forms just like anywhere else, they don't require any additional classes or styling. But you need to control dropdown width in order to fit the form rows correctly, because all forms are fluid by default. You can also control form layouts on small screens with grid classes, in case if you need to display complex forms with multiple columns. Examples below demonstrate form layouts, complex multi column form and separate group of form controls.</p>

						<p class="font-weight-semibold">Examples:</p>
						<div class="navbar navbar-expand-xl navbar-dark bg-info-700 navbar-component rounded mb-1">
							<div class="navbar-brand">
								<a href="index.html" class="d-inline-block">
									<img src="../../../../global_assets/images/logo_light.png" alt="">
								</a>
							</div>

							<div class="d-xl-none">
								<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#mega-menu-forms">
									<i class="icon-menu"></i>
								</button>
							</div>

							<div class="navbar-collapse collapse" id="mega-menu-forms">
								<ul class="navbar-nav">
									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Vertical form</a>
										<div class="dropdown-menu dropdown-content wmin-xl-300">
											<div class="dropdown-content-header">
												<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase">Vertical form</div>
												<a href="#" class="text-default"><i class="icon-menu7"></i></a>
											</div>

											<form class="dropdown-content-body" action="#">
												<div class="form-group">
													<div class="form-group-feedback form-group-feedback-right">
														<input type="text" class="form-control" placeholder="Your email">
														<div class="form-control-feedback">
															<i class="icon-mention text-muted"></i>
														</div>
													</div>
												</div>

												<div class="form-group">
													<select data-placeholder="Subscription plan" class="form-control form-control-select2" data-fouc>
														<option></option>
														<option value="updates">Website updates</option>
														<option value="discounts">Discount offers</option>
														<option value="catalog">Catalog</option>
														<option value="prints">Prints</option>
														<option value="promo">Promotions</option>
													</select>
												</div>

												<div class="form-group">
													<textarea class="form-control" cols="3" rows="3" placeholder="Your message"></textarea>
												</div>

												<div class="row">
													<div class="col-6 align-self-center">
														<div class="form-check">
															<label class="form-check-label">
																<input type="checkbox" class="form-input-styled" checked data-fouc>
																Remember
															</label>
														</div>
													</div>

													<div class="col-6 text-right">
														<button type="submit" class="btn btn-info">Submit <i class="icon-paperplane ml-2"></i></button>
													</div>
												</div>
											</form>
										</div>
									</li>

									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Horizontal form</a>
										<div class="dropdown-menu dropdown-content wmin-xl-500">
											<div class="dropdown-content-header">
												<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase">Horizontal form</div>
												<a href="#" class="text-default"><i class="icon-menu7"></i></a>
											</div>

											<form class="dropdown-content-body" action="#">
												<div class="form-group row">
													<label class="col-form-label col-xl-4">Your email:</label>
													<div class="col-xl-8">
														<div class="form-group-feedback form-group-feedback-right">
															<input type="text" class="form-control" placeholder="email@example.com">
															<div class="form-control-feedback">
																<i class="icon-mention text-muted"></i>
															</div>
														</div>
													</div>
												</div>

												<div class="form-group row">
													<label class="col-form-label col-xl-4">Password:</label>
													<div class="col-xl-8">
														<div class="form-group-feedback form-group-feedback-right">
															<input type="password" class="form-control" placeholder="Your password">
															<div class="form-control-feedback">
																<i class="icon-lock2 text-muted"></i>
															</div>
														</div>
													</div>
												</div>

												<div class="form-group row">
													<label class="col-form-label col-xl-4">Auto save:</label>
													<div class="col-xl-8">
														<div class="form-check">
															<label class="form-check-label">
																<input type="checkbox" class="form-input-styled" checked data-fouc>
																Enable
															</label>
														</div>
													</div>
												</div>

												<div class="form-group row mb-0">
													<div class="col-xl-8 ml-xl-auto">
														<button type="submit" class="btn btn-light">Cancel</button>
														<button type="submit" class="btn bg-blue ml-3">Submit <i class="icon-paperplane ml-2"></i></button>
													</div>
												</div>
											</form>
										</div>
									</li>

									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Switch list</a>
										<div class="dropdown-menu dropdown-content wmin-xl-350">
											<div class="dropdown-content-header">
												<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase">Stacked switches</div>
												<a href="#" class="text-default"><i class="icon-gear"></i></a>
											</div>

											<form class="dropdown-content-body" action="#">
												<div class="form-check form-check-right form-check-switchery">
													<label class="form-check-label">
														<input type="checkbox" class="form-input-switchery" checked data-fouc>
														Allow direct changes
													</label>
												</div>

												<div class="form-check form-check-right form-check-switchery">
													<label class="form-check-label">
														<input type="checkbox" class="form-input-switchery" checked data-fouc>
														Allow new registrations
													</label>
												</div>

												<div class="form-check form-check-right form-check-switchery">
													<label class="form-check-label">
														<input type="checkbox" class="form-input-switchery" data-fouc>
														Navbar is visible to users
													</label>
												</div>

												<div class="form-check form-check-right form-check-switchery">
													<label class="form-check-label">
														<input type="checkbox" class="form-input-switchery" data-fouc>
														Enable sessions
													</label>
												</div>

												<div class="form-check form-check-right form-check-switchery">
													<label class="form-check-label">
														<input type="checkbox" class="form-input-switchery" checked data-fouc>
														Allow layout changes
													</label>
												</div>
											</form>

											<div class="dropdown-content-footer d-flex bg-light py-1">
												<a href="#" class="d-inline-block py-2 text-grey"><i class="icon-cross2 font-size-base mr-1"></i> Cancel</a>
												<a href="#" class="d-inline-block py-2 ml-auto"><i class="icon-checkmark3 font-size-base mr-1"></i> Save changes</a>
											</div>
										</div>
									</li>

									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Checkers list</a>
										<div class="dropdown-menu dropdown-content wmin-xl-350">
											<div class="dropdown-content-header">
												<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase">Stacked checkers</div>
												<a href="#" class="text-default"><i class="icon-gear"></i></a>
											</div>

											<form class="dropdown-content-body" action="#">
												<div class="form-check form-check-right">
													<label class="form-check-label">
														<input type="checkbox" class="form-input-styled" checked data-fouc>
														Allow direct changes
													</label>
												</div>

												<div class="form-check form-check-right">
													<label class="form-check-label">
														<input type="checkbox" class="form-input-styled" checked data-fouc>
														Allow new registrations
													</label>
												</div>

												<div class="form-check form-check-right">
													<label class="form-check-label">
														<input type="checkbox" class="form-input-styled" data-fouc>
														Navbar is visible to users
													</label>
												</div>

												<hr>

												<div class="form-check form-check-right">
													<label class="form-check-label">
														<input type="radio" name="radio-group" class="form-input-styled" checked data-fouc>
														Grant permissions
													</label>
												</div>

												<div class="form-check form-check-right">
													<label class="form-check-label">
														<input type="radio" name="radio-group" class="form-input-styled" data-fouc>
														Revoke permissions
													</label>
												</div>
											</form>

											<div class="dropdown-content-footer d-flex bg-light py-1">
												<a href="#" class="d-inline-block py-2 text-grey"><i class="icon-cross2 font-size-base mr-1"></i> Cancel</a>
												<a href="#" class="d-inline-block py-2 ml-auto"><i class="icon-checkmark3 font-size-base mr-1"></i> Save changes</a>
											</div>
										</div>
									</li>
								</ul>

								<ul class="navbar-nav ml-xl-auto">
									<li class="nav-item mega-menu-right">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Multiple columns</a>
										<div class="dropdown-menu dropdown-content w-75">
											<div class="dropdown-content-header">
												<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase">Multi column form</div>
												<a href="#" class="text-default"><i class="icon-menu7"></i></a>
											</div>

											<form class="dropdown-content-body" action="#">
												<div class="row">
													<div class="col-xl-6">
														<div class="form-group">
															<label>First name:</label>
															<input type="text" placeholder="Eugene" class="form-control">
														</div>
													</div>

													<div class="col-xl-6">
														<div class="form-group">
															<label>Last name:</label>
															<input type="text" placeholder="Kopyov" class="form-control">
														</div>
													</div>
												</div>

												<div class="row">
													<div class="col-xl-6">
														<div class="form-group">
								                            <label>Country:</label>
								                            <select data-placeholder="Select your country" class="form-control form-control-select2" data-fouc>
								                            	<option></option>
								                                <option value="Cambodia">Cambodia</option> 
								                                <option value="Cameroon">Cameroon</option> 
								                                <option value="Canada">Canada</option> 
								                                <option value="Cape Verde">Cape Verde</option> 
								                            </select>
							                            </div>
													</div>

													<div class="col-xl-6">
														<div class="form-group">
															<label>State/Province:</label>
															<input type="text" placeholder="Bayern" class="form-control">
														</div>
													</div>
												</div>

												<div class="row">
													<div class="col-xl-3">
														<div class="form-group">
															<label>ZIP code:</label>
															<input type="text" placeholder="1031" class="form-control">
														</div>
													</div>

													<div class="col-xl-3">
														<div class="form-group">
															<label>City:</label>
															<input type="text" placeholder="Munich" class="form-control">
														</div>
													</div>

													<div class="col-xl-6">
														<div class="form-group">
															<label>Address line:</label>
															<input type="text" placeholder="Ring street 12" class="form-control">
														</div>
													</div>
												</div>

												<div class="text-xl-right">
													<button type="submit" class="btn btn-link">Cancel</button>
													<button type="submit" class="btn bg-blue ml-2">Submit <i class="icon-paperplane ml-2"></i></button>
												</div>
											</form>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- /form layouts -->


				<!-- Menu sizing -->
				<div class="card">
					<div class="card-header header-elements-inline">
						<h5 class="card-title">Menu sizing</h5>
						<div class="header-elements">
							<div class="list-icons">
		                		<a class="list-icons-item" data-action="collapse"></a>
		                		<a class="list-icons-item" data-action="reload"></a>
		                		<a class="list-icons-item" data-action="remove"></a>
		                	</div>
	                	</div>
					</div>

					<div class="card-body">
						<p class="mb-3">Dropdown menu has several width options: default dropdown width defined in <code>$dropdown-min-width</code> variable, responsive <code>width</code> and <code>min-width</code> utility classes (in pixels and percents), auto width that depends on child content width and full width. <strong>Auto</strong> width option requires <code>.mega-menu-left</code> or <code>.mega-menu-right</code> classes added to <code>.nav-item</code>; <strong>full</strong> width option requires <code>.mega-menu-full</code> class added to <code>.nav-item</code>. These 2 options should <strong>not</strong> have <code>.dropdown</code> or <code>.dropup</code> classes since position of parent container should be default (static).</p>

						<p class="font-weight-semibold">Examples:</p>
						<div class="navbar navbar-expand-xl navbar-dark bg-info-700 navbar-component rounded mb-1">
							<div class="navbar-brand">
								<a href="index.html" class="d-inline-block">
									<img src="../../../../global_assets/images/logo_light.png" alt="">
								</a>
							</div>

							<div class="d-xl-none">
								<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#mega-menu-size">
									<i class="icon-menu"></i>
								</button>
							</div>

							<div class="navbar-collapse collapse" id="mega-menu-size">
								<ul class="navbar-nav">
									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Auto</a>
										<div class="dropdown-menu dropdown-content">
											<div class="dropdown-content-header">
												<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase">Auto width</div>
												<a href="#" class="text-default"><i class="icon-gear"></i></a>
											</div>

											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-12">
														<div class="alpha-slate p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-danger p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-teal p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-blue p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-purple p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-pink p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-success p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-green p-1 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-info p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-orange p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-7">
														<div class="alpha-slate p-2 mb-2"></div>
													</div>
													<div class="col-5">
														<div class="alpha-warning p-2 mb-2"></div>
													</div>
												</div>
											</div>
										</div>
									</li>

									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Pixel width</a>
										<div class="dropdown-menu dropdown-content wmin-xl-500">
											<div class="dropdown-content-header">
												<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase">Custom pixel width</div>
												<a href="#" class="text-default"><i class="icon-menu7"></i></a>
											</div>

											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-12">
														<div class="alpha-slate p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-danger p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-teal p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-blue p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-purple p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-pink p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-success p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-green p-1 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-info p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-orange p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-7">
														<div class="alpha-slate p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-warning p-2 mb-2"></div>
													</div>
													<div class="col-2">
														<div class="alpha-green p-2 mb-2"></div>
													</div>
												</div>
											</div>
										</div>
									</li>

									<li class="nav-item mega-menu-left">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Percent width</a>
										<div class="dropdown-menu dropdown-content w-xl-50">
											<div class="dropdown-content-header">
												<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase">Custom percent width</div>
												<a href="#" class="text-default"><i class="icon-menu7"></i></a>
											</div>

											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-12">
														<div class="alpha-slate p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-danger p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-teal p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-blue p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-purple p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-pink p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-success p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-green p-1 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-info p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-orange p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-7">
														<div class="alpha-slate p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-warning p-2 mb-2"></div>
													</div>
													<div class="col-2">
														<div class="alpha-green p-2 mb-2"></div>
													</div>
												</div>
											</div>
										</div>
									</li>

									<li class="nav-item mega-menu-full">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Full width</a>
										<div class="dropdown-menu dropdown-content">
											<div class="dropdown-content-header">
												<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase">Full width menu</div>
												<a href="#" class="text-default"><i class="icon-menu7"></i></a>
											</div>

											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-12">
														<div class="alpha-slate p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-danger p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-teal p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-blue p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-purple p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-pink p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-success p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-green p-1 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-info p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-orange p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-7">
														<div class="alpha-slate p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-warning p-2 mb-2"></div>
													</div>
													<div class="col-2">
														<div class="alpha-green p-2 mb-2"></div>
													</div>
												</div>
											</div>
										</div>
									</li>
								</ul>

								<ul class="navbar-nav ml-xl-auto">
									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Right (auto)</a>
										<div class="dropdown-menu dropdown-menu-right dropdown-content">
											<div class="dropdown-content-header">
												<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase">Auto width</div>
												<a href="#" class="text-default"><i class="icon-menu7"></i></a>
											</div>

											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-12">
														<div class="alpha-slate p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-danger p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-teal p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-blue p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-purple p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-pink p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-success p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-green p-1 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-info p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-orange p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-7">
														<div class="alpha-slate p-2 mb-2"></div>
													</div>
													<div class="col-5">
														<div class="alpha-warning p-2 mb-2"></div>
													</div>
												</div>
											</div>
										</div>
									</li>

									<li class="nav-item dropdown">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Right (px)</a>
										<div class="dropdown-menu dropdown-menu-right dropdown-content wmin-xl-500">
											<div class="dropdown-content-header">
												<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase">Vertical form</div>
												<a href="#" class="text-default"><i class="icon-menu7"></i></a>
											</div>

											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-12">
														<div class="alpha-slate p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-danger p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-teal p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-blue p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-purple p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-pink p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-success p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-green p-1 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-info p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-orange p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-7">
														<div class="alpha-slate p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-warning p-2 mb-2"></div>
													</div>
													<div class="col-2">
														<div class="alpha-green p-2 mb-2"></div>
													</div>
												</div>
											</div>
										</div>
									</li>

									<li class="nav-item mega-menu-right">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Right (%)</a>
										<div class="dropdown-menu dropdown-content w-xl-50">
											<div class="dropdown-content-header">
												<div class="font-size-sm line-height-sm font-weight-semibold text-uppercase">Vertical form</div>
												<a href="#" class="text-default"><i class="icon-menu7"></i></a>
											</div>

											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-12">
														<div class="alpha-slate p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-danger p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-teal p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-blue p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-purple p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-pink p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-success p-2 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-green p-1 mb-2"></div>
													</div>
													<div class="col-6">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-info p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-orange p-2 mb-2"></div>
													</div>
													<div class="col-8">
														<div class="alpha-brown p-1 mb-2"></div>
													</div>
													<div class="col-4">
														<div class="alpha-primary p-1 mb-2"></div>
													</div>
													<div class="col-7">
														<div class="alpha-slate p-2 mb-2"></div>
													</div>
													<div class="col-3">
														<div class="alpha-warning p-2 mb-2"></div>
													</div>
													<div class="col-2">
														<div class="alpha-green p-2 mb-2"></div>
													</div>
												</div>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- /menu sizing -->


				<!-- Content grid -->
				<div class="card">
					<div class="card-header header-elements-inline">
						<h5 class="card-title">Content grid</h5>
						<div class="header-elements">
							<div class="list-icons">
		                		<a class="list-icons-item" data-action="collapse"></a>
		                		<a class="list-icons-item" data-action="reload"></a>
		                		<a class="list-icons-item" data-action="remove"></a>
		                	</div>
	                	</div>
					</div>

					<div class="card-body">
						<p class="mb-3">Mega menu component supports a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. Using a single set of <code>.col-[breakpoint]-[count]</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any <code>.row</code> inside mega menu dropdown to make them stackable on mobile or <code>.col-[count]</code> classes to avoid stacking.</p>

						<p class="font-weight-semibold">Examples:</p>
						<div class="navbar navbar-expand-xl navbar-dark bg-info-700 navbar-component rounded mb-1">
							<div class="navbar-brand">
								<a href="index.html" class="d-inline-block">
									<img src="../../../../global_assets/images/logo_light.png" alt="">
								</a>
							</div>

							<div class="d-xl-none">
								<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-menu-grid">
									<i class="icon-menu"></i>
								</button>
							</div>

							<div class="navbar-collapse collapse" id="navbar-menu-grid">
								<ul class="navbar-nav">
									<li class="nav-item mega-menu-full">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Content grid</a>
										
										<div class="dropdown-menu dropdown-content">
											<div class="dropdown-content-header">
												<span class="font-weight-semibold">12 columns grid</span>
												<a href="#" class="text-default"><i class="icon-gear"></i></a>
											</div>

											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-xl-6">
														<div class="bg-slate rounded py-2 px-3 mb-3">
															.col-xl-6
														</div>
													</div>
													<div class="col-xl-6">
														<div class="bg-slate rounded py-2 px-3 mb-3">
															.col-xl-6
														</div>
													</div>
												</div>

												<div class="row">
													<div class="col-xl-4">
														<div class="bg-slate rounded py-2 px-3 mb-3">
															.col-xl-4
														</div>
													</div>
													<div class="col-xl-4">
														<div class="bg-slate rounded py-2 px-3 mb-3">
															.col-xl-4
														</div>
													</div>
													<div class="col-xl-4">
														<div class="bg-slate rounded py-2 px-3 mb-3">
															.col-xl-4
														</div>
													</div>
												</div>

												<div class="row">
													<div class="col-xl-8">
														<div class="bg-slate rounded py-2 px-3 mb-3">
															.col-xl-8
														</div>
													</div>
													<div class="col-xl-4">
														<div class="bg-slate rounded py-2 px-3 mb-3">
															.col-xl-4
														</div>
													</div>
												</div>
											</div>
										</div>
									</li>

									<li class="nav-item mega-menu-full">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Columns offset</a>
										
										<div class="dropdown-menu dropdown-content">
											<div class="dropdown-content-header">
												<span class="font-weight-semibold">Columns offset</span>
												<a href="#" class="text-default"><i class="icon-gear"></i></a>
											</div>

											<div class="dropdown-content-body">
												<div class="row">
													<div class="col-xl-4">
														<div class="bg-slate rounded py-2 px-3 mb-3">
															.col-xl-4
														</div>
													</div>
													<div class="col-xl-4 offset-xl-4">
														<div class="bg-slate rounded py-2 px-3 mb-3">
															.col-xl-4 .offset-xl-4
														</div>
													</div>
												</div>

												<div class="row">
													<div class="col-xl-4">
														<div class="bg-slate rounded py-2 px-3 mb-3">
															.col-xl-4
														</div>
													</div>
													<div class="col-xl-4 offset-xl-4">
														<div class="bg-slate rounded py-2 px-3 mb-3">
															.col-xl-4 .offset-xl-4
														</div>
													</div>
												</div>

												<div class="row">
													<div class="col-xl-6 offset-xl-3">
														<div class="bg-slate rounded py-2 px-3 mb-3">
															.col-xl-6 .offset-xl-3
														</div>
													</div>
												</div>
											</div>
										</div>
									</li>

									<li class="nav-item mega-menu-full">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">No gutters</a>
										
										<div class="dropdown-menu dropdown-content">
											<div class="dropdown-content-header">
												<span class="font-weight-semibold">No gutters</span>
												<a href="#" class="text-default"><i class="icon-gear"></i></a>
											</div>

											<div class="dropdown-content-body">
												<div class="row no-gutters">
													<div class="col-4">
														<div class="bg-slate rounded-left py-2 px-3 mb-3">
															.col-4
														</div>
													</div>
													<div class="col-4">
														<div class="bg-slate border-left-1 border-white py-2 px-3 mb-3">
															.col-4
														</div>
													</div>
													<div class="col-4">
														<div class="bg-slate rounded-right border-left-1 border-white py-2 px-3 mb-3">
															.col-4
														</div>
													</div>
												</div>

												<div class="row no-gutters">
													<div class="col-6">
														<div class="bg-slate rounded-left py-2 px-3 mb-3">
															.col-6
														</div>
													</div>
													<div class="col-6">
														<div class="bg-slate rounded-right border-left-1 border-white py-2 px-3 mb-3">
															.col-6
														</div>
													</div>
												</div>

												<div class="row no-gutters">
													<div class="col-8">
														<div class="bg-slate rounded-left py-2 px-3 mb-3">
															.col-8
														</div>
													</div>
													<div class="col-4">
														<div class="bg-slate rounded-right border-left-1 border-white py-2 px-3 mb-3">
															.col-4
														</div>
													</div>
												</div>
											</div>
										</div>
									</li>
								</ul>

								<ul class="navbar-nav ml-xl-auto">
									<li class="nav-item mega-menu-full">
										<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Non-responsive</a>
										
										<div class="dropdown-menu dropdown-content">
											<div class="dropdown-content-header">
												<span class="font-weight-semibold">All breakpoints</span>
												<a href="#" class="text-default"><i class="icon-gear"></i></a>
											</div>

											<div class="dropdown-content-body">
												<div class="row">
													<div class="col">
														<div class="bg-slate rounded py-2 px-3 mb-3">
															.col
														</div>
													</div>
													<div class="col">
														<div class="bg-slate rounded py-2 px-3 mb-3">
															.col
														</div>
													</div>
													<div class="col">
														<div class="bg-slate rounded py-2 px-3 mb-3">
															.col
														</div>
													</div>
													<div class="col">
														<div class="bg-slate rounded py-2 px-3 mb-3">
															.col
														</div>
													</div>
												</div>

												<div class="row">
													<div class="col-4">
														<div class="bg-slate rounded py-2 px-3 mb-3">
															.col-4
														</div>
													</div>
													<div class="col-4">
														<div class="bg-slate rounded py-2 px-3 mb-3">
															.col-4
														</div>
													</div>
													<div class="col-4">
														<div class="bg-slate rounded py-2 px-3 mb-3">
															.col-4
														</div>
													</div>
												</div>

												<div class="row">
													<div class="col-6">
														<div class="bg-slate rounded py-2 px-3 mb-3">
															.col-6
														</div>
													</div>
													<div class="col-6">
														<div class="bg-slate rounded py-2 px-3 mb-3">
															.col-6
														</div>
													</div>
												</div>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- /content grid -->


				<!-- Navigation classes -->
				<div class="card">
					<div class="card-header header-elements-inline">
						<h5 class="card-title">Navigation classes</h5>

						<div class="header-elements">
							<div class="list-icons">
		                		<a class="list-icons-item" data-action="collapse"></a>
		                		<a class="list-icons-item" data-action="reload"></a>
		                		<a class="list-icons-item" data-action="remove"></a>
		                	</div>
	                	</div>
					</div>

					<div class="card-body">
						This table contains all classes related to the horizontal navbar navigation. Navbar navigation links build on default <code>.nav</code> options with their own modifier class and require the use of toggler classes for proper responsive styling. Navigation in navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for <code>.nav-item</code> and <code>.nav-link</code>.
					</div>

					<div class="table-responsive">
						<table class="table table-bordered">
							<thead>
								<tr>
									<th style="width: 20%;">Class</th>
									<th>Description</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th colspan="3" class="table-active">Navigation elements</th>
								</tr>
								<tr>
									<td><code>.nav</code></td>
									<td>Global wrapper for navigation list. It uses default Bootstrap's styles of <code>.nav</code> component and similar markup options.</td>
								</tr>
								<tr>
									<td><code>.navbar-nav</code></td>
									<td>for a full-height and lightweight navigation (including support for dropdowns).</td>
								</tr>
								<tr>
									<td><code>.nav-item</code></td>
									<td>This class is required in an immediate nav link parent element in any <code>.nav</code> container: sidebar, navbar, nav groups, tabs, pills etc.</td>
								</tr>
								<tr>
									<td><code>.nav-item.dropdown</code></td>
									<td>Combination of these classes is required for items with dropdown menu - nav item with <code>.dropdown</code> class is a dropdown toggle and menu wrapper that declares <code>position: relative;</code>.</td>
								</tr>
								<tr>
									<td><code>.nav-item.dropup</code></td>
									<td>Same as <code>.dropdown</code>, but this class is required in bottom navbars, because it triggers dropdown menus above elements in navbar. Dropdown caret direction in bottom navbar also depends on this class.</td>
								</tr>
								<tr>
									<td><code>.navbar-nav-link</code></td>
									<td>A custom class, unlike Bootstrap's default <code>.nav-link</code> class it doesn't affect navs in dropdowns. This class is responsible for navigation link styling and is also required as a part of nav list element structure. It's also a target for <code>.active</code> and <code>.disabled</code> classes.</td>
								</tr>

								<tr class="table-border-double">
									<th colspan="3" class="table-active">Dropdowns</th>
								</tr>
								<tr>
									<td><code>.dropdown-user</code></td>
									<td>This class is used in menu with user pic - image size is calculated dynamically in SASS and <code>.dropdown-user</code> is needed to target the container where these calculations need to run.</td>
								</tr>
								<tr>
									<td><code>.dropdown-content</code></td>
									<td>If you need to prevent dropdown from closing when you interact with it, add <code>.dropdown-content</code> to default <code>.dropdown-menu</code> container. This doesn't disable click event outside the dropdown though.</td>
								</tr>
								<tr>
									<td><code>.dropdown-content-header</code></td>
									<td>Class for the <strong>header</strong> within <code>.dropdown-content</code> - custom element with padding that mathches custom dropdown body and footer padding. Can contain multiple components on both sides.</td>
								</tr>
								<tr>
									<td><code>.dropdown-content-body</code></td>
									<td>Class for the <strong>body</strong> within <code>.dropdown-content</code> - element with custom padding, by default is similar to <code>.card-body</code>, but can be changed in SASS variables if you want to increase or decrease custom dropdown spacing.</td>
								</tr>
								<tr>
									<td><code>.dropdown-content-footer</code></td>
									<td>Class for the <strong>footer</strong> within <code>.dropdown-content</code> - custom element with padding that mathches custom dropdown body and header padding. Can contain multiple components on both sides.</td>
								</tr>
								<tr>
									<td><code>.dropdown-scrollable</code></td>
									<td>This class sets <code>max-height</code> to the dropdown body and adds vertical scrollbar. Can be added to <code>.dropdown-content-body</code> container to make only body scrollable or to the entire <code>.dropdown-menu</code>. Default max-height value is <code>340px</code>.</td>
								</tr>
								<tr>
									<td><code>.mega-menu-[alignment]</code></td>
									<td>These classes control the percent-based width of the menu. Options for <strong>[alignment]</strong>: <strong>full</strong> - sets 100% width, <strong>left</strong> - aligns menu to the left, <strong>right</strong> - aligns menu to the right. Note - make sure you don't use <code>.dropdown</code> and <code>.dropup</code> classes in <code>.nav-item</code> container.</td>
								</tr>
								<tr>
									<td><code>.w-[breakpoint]-[value]</code></td>
									<td>Set of responsive utility classes that set <code>min-width</code> property to the <code>.dropdown-menu</code> container. Very useful in dropdowns with long content. Available options for <strong>[value]</strong> (in pixels): 200, 250, 300, 350, 400, 450, 500, 550, 600.</td>
								</tr>

								<tr class="table-border-double">
									<th colspan="3" class="table-active">Misc</th>
								</tr>
								<tr>
									<td><code>.caret-0</code></td>
									<td>Add this class to any <code>.navbar-nav-link.dropdown-toggle</code> if you want to hide caret (directional arrow). Useful in nav links with single icon, without text and badge.</td>
								</tr>
								<tr>
									<td><code>[data-hover="dropdown"]</code></td>
									<td>Data attribute that triggers dropdown toggling on <code>hover</code> <strong>and</strong> <code>click</code>. It also affects all submenus within this menu, so needs to be added to <code>[data-toggle="dropdown"]</code> only on top level.</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<!-- /navigation classes -->

			</div>
			<!-- /content area -->


			<!-- Footer -->
			<div class="navbar navbar-expand-lg navbar-light">
				<div class="text-center d-lg-none w-100">
					<button type="button" class="navbar-toggler dropdown-toggle" data-toggle="collapse" data-target="#navbar-footer">
						<i class="icon-unfold mr-2"></i>
						Footer
					</button>
				</div>

				<div class="navbar-collapse collapse" id="navbar-footer">
					<span class="navbar-text">
						&copy; 2015 - 2018. <a href="#">Limitless Web App Kit</a> by <a href="http://themeforest.net/user/Kopyov" target="_blank">Eugene Kopyov</a>
					</span>

					<ul class="navbar-nav ml-lg-auto">
						<li class="nav-item"><a href="https://kopyov.ticksy.com/" class="navbar-nav-link" target="_blank"><i class="icon-lifebuoy mr-2"></i> Support</a></li>
						<li class="nav-item"><a href="http://demo.interface.club/limitless/docs/" class="navbar-nav-link" target="_blank"><i class="icon-file-text2 mr-2"></i> Docs</a></li>
						<li class="nav-item"><a href="https://themeforest.net/item/limitless-responsive-web-application-kit/13080328?ref=kopyov" class="navbar-nav-link font-weight-semibold"><span class="text-pink-400"><i class="icon-cart2 mr-2"></i> Purchase</span></a></li>
					</ul>
				</div>
			</div>
			<!-- /footer -->

		</div>
		<!-- /main content -->

	</div>
	<!-- /page content -->

</body>
</html>
